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ASP.NET 是 构建 现代 Web 应 用 及 Web 服务 的 开放 平台 , 它 基 于 . NET 框架 ,并 充分 利 
HTML5 、CSS 及 JavaScript 的 优势 ,帮助 开发 人 员 构建 简单 高效、. 易 扩展 的 企业 级 应 用 。 
作为 Web 应 用 开发 的 两 大 主流 技术 ,Java EE 与 ASP. NET 都 已 发 展 得 非常 成 熟 , 体 

系 结构 日 趋 完善 。 在 行业 内 ,. NET 技术 越 来 越 受 到 企业 的 重视 ,应 用 越 来 越 广泛 ,国内 外 
对 . NET 研发 人 员 的 需求 量 也 在 不 断 上 升 ,熟悉 . NET 技术 体系 的 学 生 就 业 前 景 良 好 。 

本 书 作者 长 期 从 事 Web 应 用 开发 和 .NET 技术 课程 的 一 线 教学 工作 ,有 着 深厚 的 开发 
功底 和 丰富 的 教学 经 验 ; 熟悉 ASP.NET 和 Java EE 两 大 主流 技术 体系 ,对 面向 对 象 技术 、 
设计 模式 、 软 件 架构 等 知识 理解 较为 深刻 ,能 够 站 在 理论 的 高 度 来 指导 实践 ; 同时 ,作者 也 
非常 了 解 学 生 的 认 知 规律 。 

Web 应 用 开发 有 着 很 强 的 技巧 性 ,要 求学 生 从 整体 上 把 握 软 件 的 架构 ,框架 ,合理 地 使 
用 设计 模式 ,这样 才 能 设计 出 稳定 性 好 、 扩 展 性 强 的 软件 产品 。 很 多 培训 公司 的 课程 体系 和 
教材 注重 实践 , 却 缺 乏 理 论 深度 ,培养 出 来 的 学 生 能 够 应 付 就 业 , 却 难以 取得 长 远 的 发 展 。 
本 书 更 注重 思想 方法 的 培养 ,将 面向 对 象 思想 .设计 模式 和 软件 架构 的 知识 融和 人 各 章节 教学 
中 ,尽量 使 学 生 知 其 然 并 知 其 所 以 然 , 以 思想 方法 指导 设计 实践 。 

本 书 第 1 版 发 行 后 ,得 到 了 广大 师 生 的 喜爱 ,并 且 加 印 了 3 次 。 近 年 来 , Web 开发 技术 
又 有 了 新 的 发 展 趋势 ,尤其 是 MVC 开发 模式 、Web Service 技术 及 AJAX 技术 的 应 用 全 面 
爆发 ,对 象 关系 映射 机 制 深入 人 心 ,而 客户 端 编程 技术 和 框架 也 变 得 越 来 越 重 要 。 在 第 1 版 
中 ,这 些 关键 内 容 没 有 充分 体现 出 来 ,因此 在 新 一 版 教材 中 做 了 改进 。 

本 次 改版 充分 反映 Web 2.0 时 代 的 技术 特征 ,对 第 1 版 教材 内 容 进 行 了 大 刀 阔 答 的 调 
整 ,增加 了 MVC 框架、 实体 模型 .客户 端 编 程 框 架 、 响 应 式 设计 等 内 容 , 同 时 顺应 技术 潮流 ， 
重新 设计 了 Web Service 与 AJAX 技术 的 内 容 体系 ,突出 REST 风格 的 Web Service 以 及 
AJAX 与 Web API 的 交互 ,更 利于 合理 构建 软件 架构 ,并 开发 扩展 性 强 的 大 型 Web 应 用 。 

全 书 的 所 有 程序 在 Windows 7/Windows 10 IIS 7/IIS Express、. NET Framework 4 
下 测试 通过 ,数据 库 使 用 SQL Server LocalDB 及 SQL Server Express, 集 成 开发 环境 采用 
Visual Studio 2015 及 2017 Community 版 ,所 有 开发 工具 都 为 正版 免费 产品 ,可 以 从 微软 
官方 网 站 免费 下 载 。 

本 书 第 1 童 、 第 2 章 、 第 4~6 章 由 喻 钧 编写 ,第 7 一 10 章 由 白 小 军 编写 ,第 3 章 由 岳 铭 
编写 ,第 1 章 、 第 5 章 部 分 内 容 和 程序 由 代 军 完成 ,全 书 由 喻 钧 统 稿 。 

尽管 在 编写 本 书 的 过 程 中 尽 了 最 大 努力 ,但 由 于 编者 水 平 有 限 , 疏 漏 及 不 妥 之 处 在 所 难 
免 , 县 请 读者 批评 指正 。 
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Web 程 序 设计 基础 


Web 技术 的 迅速 发 展 极 大 地 改变 了 整个 世界 ,也 深刻 地 影响 了 人 们 的 日 常生 活 。 作 为 
一 个 出 色 的 Web 开发 框架 ,ASP. NET 已 经 成 为 Web 应 用 开发 中 不 可 缺少 的 中 坚 力量 ， 
此 衍生 出 数 以 万 计 的 产品 、 服 务 以 及 开源 工程 。 学 习 ASP. NET 程序 设计 基础 将 有 助 于 理 
解 Web 应 用 的 开发 。 

本 章 将 从 Web 的 工作 原理 开始 阐述 Web 开发 基础 知识 ,并 与 读者 一 起 搭建 ASP. NET 的 
运行 和 开发 环境 ,创建 第 一 个 ASP. NET Web 站 点 。 

















1.1 Web 的 工作 原理 
A 

当 用 户 访 问 Web 站 点 时 ,数据 是 遵从 HTTP(HyperText Transfer Protocol) 协 议 进行 
传输 的 。HTTP 即 超 文 本 传输 协议 ,是 基于 Browser/Server( 浏 览 器 /服务 器 ,B/S) 模 式 使 
用 TCP 连接 在 应 用 层 进行 可 靠 的 数据 传输 。 


1.1.1 软件 体系 结构 


在 目前 的 应 用 软件 开发 领域 中 主要 包括 两 大 软件 开发 体系 结构 ,一 种 是 Client/Server 
(客户 机 /服务 器 ,C/S) 结 构 , 一 种 是 Browser/Server( 浏 览 器 /服务 器 ) 结 构 。 

C/S 是 较 早 的 软件 体系 结构 ,主要 适用 于 局 域 网 环境 ,如 图 1-1 所 示 。 服 务 器 通常 采用 
高 性 能 的 PC 或 工作 站 ,并 安装 大 型 的 数据 库 系 统 , 如 Oracle、Sybase 或 SQL Server 等 。 客 
户 机 需要 安装 专门 的 客户 端 应 用 程序 。 这 种 结构 能 够 充分 发 挥 客户 端 PC 的 处 理 能 力 , 客 
户 端 响应 速度 快 。 但 系统 的 可 扩展 性 和 可 维护 性 差 ,例如 软件 升级 时 ,每 台 客 户 机 都 需要 重 
新 安装 ,系统 维护 和 升级 的 成 本 高 。 另 外 ,由 于 采用 Intranet 技术 ,适用 于 局 域 网 环境 的 可 
连接 用 户 数 有 限 , 当 用 户 数量 增多 时 ,系统 性 能 会 明显 下 降 ,代码 的 可 重用 性 






























































Client 
客户 机 





固定 连接 


图 1-1 C/S 软 件 开发 体系 结构 
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B/S 结构 是 随 着 Web 技术 的 发 展 逐 渐 成 熟 的 软件 体系 结构 。 在 这 种 结构 中 ,所 有 的 应 














用 程序 以 及 数据 库 系 统 都 安装 在 服务 器 (Server) 上 ,客户 端 只 需 安装 任意 一 个 浏览 器 


(Browser) 即 可 , 它 是 零 维护 的 。 用 户 通过 浏览 器 向 服务 器 发 出 一 个 请 求 ( 如 在 地 址 栏 中 输 


入 一 个 网 址 ,或 





性 好 ,系统 的 扩 


者 单 击 超 链 接 及 按钮 ) ,服务 器 处 理 该 请 求 后 ,将 结果 以 HTML 的 形式 返 下 
给 客户 端 ,如 图 1-2 所 示 。B/S 结构 采用 Internet/Intranet 技术 ,适用 于 广域网 环境 。 它 可 
以 根据 访问 量 动态 地 配置 Web 服务 器 、 应 用 服务 器 ,以 支持 更 多 的 客户 。 其 代码 的 可 重用 








展 维护 简单 。 





发 出 请 求 


浏览 器 


返回 HTML 网 页 
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Server 
Browser 服务 器 


图 1-2 B/S 软件 体系 结构 


B/S 结构 和 C/S 结构 的 比较 如 表 1-1 所 示 。 
表 1-1 B/S 结构 与 C/S 结构 的 比较 



































B/S 软件 体系 结构 C/S 软件 体系 结构 
硬件 环境 广域网 ,不 必 是 专门 的 网 络 环 境 , 只 要 是 能 | 局 域 网 ,专门 的 小 范围 网 络 硬件 环境 ,用 
接 入 Internet 的 用 户 均 可 户 固 定 , 用 户 数 量 有 限 
系统 维护 客户 端 零 维护 ,易于 实现 系统 的 无 颖 升级 升级 和 维护 难 ,成 本 高 
单一 结构 ,软件 整体 性 较 强 , 各 部 分 间 的 
bo 结构 ， 生 相 对 独立 ,本 5 
软件 重用 性 | 多 重 结 构 , 各 构件 相对 独立 ,可 重用 性 较 好 赵 合 性 强 ,可 重用 性 较 差 
EE 平台 相关 的 ， 
平台 相关 性 | 客户 端 和 服务 器 端 是 平台 无 关 的 六 和 证 作 省 仆 本 全 相交 全 全 
Windows 平台 
安全 性 面向 不 可 知 的 用 户 群 ,对 信息 安全 的 控制 能 | 面向 相对 固定 的 用 户 群 ,对 信息 安全 的 
力 相 对 较 弱 控制 能 力 强 
1.1.2 HTTP 协议 


HTTP 协 议定 义 了 Web 浏览 器 和 Web 服务 器 之 间 交 换 数据 的 过 程 以 及 数据 本 身 的 格 
式 , 它 是 客户 机 与 服务 器 交互 遵守 的 协议 。 


HTTP 协议 的 


工作 原理 如 图 1-3 所 示 。 它 表示 基于 HTTP 的 信息 交换 过 程 , 共 分 为 4 


个 步骤 , 即 建立 连接 、 发 送 请 求 、 返 回响 应 、 断 开 连 接 。 首 先 ,客户 端的 浏览 器 向 服务 器 的 某 





个 端口 发 出 请 求 ,对 





E 立 与 服务 器 的 连接 ,通常 默认 端口 号 为 80。 在 连接 建立 后 客户 端 向 服 





务 器 发 出 一 个 请 求 (Request) 。 服 务 器 接收 和 处 理 请 求 后 返回 一 个 响应 (Response) 页 面 。 
最 后 ,客户 端 与 服务 器 之 间 的 连接 断 开 ,通信 结束 。 一 般 来 说 ,任何 一 方 都 可 结束 连接 ,但 通 
常 是 客户 端 收 到 所 请 求 的 信息 后 关闭 连接 。 

HTTP 协议 是 一 种 请 求 /应 答 协 议 , 它 通过 在 客户 机 和 服务 器 之 间 发 送 请 求 、 应 答 消息 
的 方式 工作 。 通 常 ,HTTP 消息 包括 客户 机 向 服务 器 的 请 求 消息 、 服 务 器 向 客户 机 的 响应 
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Browser Web Server 
建立 连接 
NP 


返回 响应 
OO 


图 1-3 HTTP 的 工作 原理 


UU 














消息 。 
一 个 HTTP 请 求 消息 包括 3 个 部 分 , 即 一 个 请 求 行 .若干 消息 头 以 及 消息 的 实体 内 容 。 
其 中 一 些 消 息 头 和 实体 内 容 是 可 选 的 ,消息 头 和 实体 内 容 之 间 用 空 行 隔 开 。 
例如 ,图 1-4 所 示 的 矩形 框 就 是 一 个 HTTP 请 求 消息 的 内 容 。 第 1 行为 请 求 行 ,中 间 
的 若干 行为 消息 头 , 空 行 表示 消息 头 的 结束 ,最 后 是 消息 的 实体 内 容 。 
GET/books/java.html HTTP/1.1 一 请 求 行 
Accept: */* 
Accept-Language: en-us 


Connection: Keep-Alive 
Host: localhost 一 多 个 消息 头 


Referer: http://localhost/links.asp 
User-Agent: Mozilla/4.0 
Accept-Encoding: gzip, deflate 


消息 实体 内 容 


一 一 个 空 行 





图 1-4 HTTP 请 求 消息 


在 图 1-4 中 ,第 1 行 (请 求 行 ) 表 示 客 户 端 采 用 GET 方式 向 服务 器 传送 数据 ,请 求 的 
URL 地 址 为 本 地 文件 /books/java. html ,使 用 的 HTTP 协议 版 本 为 1. 1 。 

从 第 2 行 开始 ,直到 空 行 前 是 HTTP 请 求 头 域 的 内 容 , 它 的 常用 参数 如 下 。 

。 Accept: 用 于 指定 客户 端 可 以 接受 的 MIME 类 型 ,如 x* /* 表示 任何 类 型 。 

。 Accept-Charset: 指定 客户 端 可 以 使 用 的 字符 集 , 如 UTF-8。 

。 Accept-Language: 指定 客户 端的 接收 语言 ,可 以 指定 多 个 ,如 zh-cn。 

。 Accept-Encoding: 指定 客户 端的 接收 编码 ,如 gzip ,deflate。 

。 Connection: 指示 处 理 完 本 次 请 求 /响应 后 ,客户 端 与 服务 器 是 否 继续 保持 连接 , 取 

值 为 Keep-Alive 或 close, 默 认为 Keep-Alive。 

。 Host: 指定 资源 所 在 的 主机 和 端口 号 。 

。 Referer: 确定 获得 请 求 URI 的 资源 地 址 。 

。 User-Agent: 用 户 代理 ,指定 初始 化 请 求 的 客户 端 程序 ,如 浏览 器 等 。 

和 请 求 消息 类 似 ,一 个 HTTP 响应 消息 包括 3 个 部 分 , 即 一 个 状态 行 ,若干 消息 头 以 及 
实体 内 容 。 其 中 一 些 消 息 头 和 实体 内 容 是 可 选 的 ,消息 头 和 实体 内 容 之 间 用 空 行 隔 开 。 
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例如 ,图 1-5 展示 了 一 个 HTTP 响应 消息 的 内 容 。 第 1 行为 状态 行 ,中 间 为 若干 消息 
头 , 空 行 表示 消息 头 的 结束 ,最 后 是 消息 的 实体 内 容 。 








HTTP/IL.1 200 OK 一 状态 行 
Server: Microsoft-lIS/5.0 
Date: Thu,13 Jul 2005 05:46:53 GMT 
Content-Length: 2291 一 多 个 消息 头 
Content-Type: text/html 
Cache-control: private 

一 一 个 空 行 
<HTML> 
<BODY> 








图 1-5 HTTP 响应 消息 


(1.2 ”Web 程序 设计 技术 
一 


在 Web 程序 的 设计 过 程 中 ,主要 用 到 客户 端 技术 和 服务 器 端 技术 。 客 户 端 技术 也 叫 
Web 前 端 技术 ,主要 包括 HTML、CSS JavaScript 等 。 服 务 器 端 技术 也 叫 Web 后 端 技术 ， 
主要 包括 ASP. NET PHP JSP .Python 等 。 

无 论 Web 前 端 还 是 后 端 , 都 要 用 到 脚本 编程 。 脚 本 (Scripts) 是 指骨 入 到 Web 页 中 的 
程序 代码 ,所 使 用 的 编程 语言 称 为 脚本 语言 。 按 照 执 行 方式 和 位 置 的 不 同 ,脚本 分 为 客户 端 
脚本 (Client-side Scripts) 和 服务 器 端 脚本 (Server-side Scripts) 。 脚 本 编程 的 基本 特点 是 : 
由 HTML 构造 页 面 模板 ,由 语言 解释 引擎 解释 并 运行 脚本 ,运行 后 产生 的 页 面 内 容 插 入 到 
页 面 模板 中 。 

客户 端 脚本 的 解释 器 位 于 Web 浏览 器 中 ,在 客户 机 上 被 Web 浏览 器 执行 。 服 务 器 端 
脚本 的 解释 器 则 位 于 Web 服务 器 中 ,在 服务 器 上 被 Web 应 用 服务 器 执行 。 


1.2.1 客户 端 技术 


1. HTML 超 文 本 标记 语言 











HTML(HyperText Marked Language, 超 文本 标记 语言 ) 是 Web 页 的 标记 性 语言 。 
“ 超 文 本 ”就 是 指 页 面 内 可 以 包含 图 片 链接 ,甚至 音乐 ,程序 等 非 文字 元 素 。HTML 文件 本 
身 是 一 种 文本 文件 ,通过 在 文本 文件 中 添加 标记 符 可 以 告诉 浏览 器 如 何 显示 HTML 文件 
中 的 内 容 ( 如 文字 如 何 处 理 .画面 如 何 安排 .图 片 如 何 显 示 等 ) 。 

浏览 器 按 顺序 解释 执行 HTML 文件 ,对 于 书写 出 错 的 标记 既 不 报错 ,也 不 停止 执行 。 
需要 注意 的 是 ,不 同 的 浏览 器 对 于 同一 标记 可 能 有 不 同 的 解释 ,也 就 可 能 有 不 同 的 显示 
效果 。 


2. CSS 样式 表 





CSS(Cascading Style Sheets, 层 全 样式 表 ) 是 一 种 用 来 表现 HTML 或 XML 等 文件 样 


第 1 章 “” Web 程序 设计 基础 / 


式 的 计算 机 语言 。CSS 实现 了 页 面 形式 和 内 容 的 分 离 ,不仅 可 以 静态 地 修饰 网 页 ,还 可 以 
配合 各 种 脚本 语言 动态 地 对 网 页 中 的 各 元 素 进行 格式 化 。 

通常 ,应 用 样式 表 的 网 站 的 用 户 体验 会 更 快 。 如 果 将 所 有 样式 保存 在 一 个 文件 中 ,可 以 
减少 维护 的 时 间 、 减 少 错误 的 机 会 ,从 而 提高 表达 的 一 致 性 。 使 用 CSS 的 HTML 或 
XHTML 网 站 更 容易 调整 ,以 适应 不 同 的 浏览 器 。 





























3. JavaScript 脚本 语言 








JavaScript 是 一 种 解释 型 的 .基于 对 象 的 .采用 事件 驱动 的 脚本 语言 。 它 由 Netscape 公 
司 开发 。 其 主要 工作 机 制 是 将 JavaScript 脚本 嵌入 到 Web 页 面 中 ,并 随 着 HTML 文件 一 
起 传送 到 客户 端 ,由 浏览 器 解释 执行 。 在 脚本 执行 期 间 无 须 与 服务 器 交互 ,可 以 对 用 户 的 操 
作 直接 做 出 响应 。 

在 使 avaScript 时 ,通常 用 标记 < script > 和 </script > 界定 ,将 JavaScript 代码 放 到 
HTML 的 < head > 或 < body > 部 分 。 

JavaScript 不 需要 Java 编译 器 ,由 浏览 器 逐 行 地 解释 执行 ; JavaScript 具有 跨 平台 性 ， 
它 依 赖 于 浏览 器 本 身 , 与 操作 环境 无 关 , 只 要 是 能 支持 JavaScript 的 浏览 器 就 可 以 正确 执 
行 ; JavaScript 使 网 页 变 得 生动 ; JavaScript 可 以 使 有 规律 .重复 的 HTML 文 段 简化 ,减少 
下 载 时 间 ; JavaScript 能 及 时 响应 用 户 的 操作 ,对 提交 表单 做 即时 检查 ,大 大 减少 了 服务 器 
的 开销 。 


1.2.2 服务 器 端 技术 
服务 器 端 技术 主要 是 指 服务 器 端的 脚本 编程 技术 ,常用 的 服务 器 端 脚 本 语言 有 ASP. 
NET、PHP、JSP 和 Python 等 。 它 们 的 共同 点 是 : 脚本 都 运行 于 服务 器 端 ,能 够 动态 地 生成 


网 页 ; 脚本 运行 不 受 客 户 端 浏览 器 限制 ; 脚本 程序 都 是 将 脚本 语言 柑 入 到 HTML 文档 中 ， 
执行 后 返回 给 客户 端的 是 HTML 代码 。 















































1. ASP.NET 


ASP.NET 是 Microsoft 公司 在 ASP(Active Server Pages) 基础 上 推出 的 新 一 代 脚 本 
语言 。ASP. NET 是 基于 Microsoft. NET 框架 的 , 它 建立 在 公共 语言 运行 库 上 ,可 用 于 在 
服务 器 上 生成 功能 强大 的 Web 应 用 程序 ,为 Web 站 点 创建 动态 的 .交互 的 HTML 页 面 。 
ASP. NET 的 主要 特点 如 下 : 

。 ASP. NET 采用 基于 组 件 的 、 面 向 对 象 的 模块 化 开发 模式 。 

。 更 加 广泛 的 底层 支持 ,可 以 使 用 C# 、VB 等 编程 语言 作为 宿主 开发 。 

。 ASP. NET 采用 编译 后 运行 的 方式 ,执行 效率 大 幅 提高 。 它 将 程序 第 一 次 运行 时 编 

译 成 DLL 文件 ,以 后 直接 执行 DLL 文件 ,这 样 速度 就 变 得 非常 快 。 

。 支持 WYSIWYG( 所 见 即 所 得 ) 、 拖 放 控 件 和 自动 部 署 等 功能 。 

。 程序 结构 清晰 : 将 程序 代码 和 HTML 标记 分 开 ,使 程序 设计 简化 ,结构 更 清晰 。 

。 移植 方便 : ASP. NET 可 以 向 目标 服务 器 直接 复制 组 件 , 当 需 要 更 新 时 重新 复制 一 

个 即 可 。 
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PHP(HyperText Preprocessor) 








PHP 由 PHP 网 络 小 组 开发 ,是 免费 的 开放 源 代码 产品 。Apache 和 MySQL 也 同样 是 


免费 开源 ,Apache、PHP 和 MySQL 搭配 使 用 可 以 快速 地 搭建 一 套 不 错 的 动态 网 站 系统 ,其 
执行 效率 比 IIS 十 ASP 十 Access 要 高 ,而 后 者 的 使 用 还 必须 另外 付 钱 给 微软 。 

PHP 是 一 种 嵌 和 人 HTML 页 面 中 的 脚本 语言 ,类 似 于 C、Java 和 Perl, 语 法 简单 ,是 一 种 
解释 型 语言 。 它 可 以 跨 UNIX、Linux、Windows 平台 使 用 ,具有 平台 无 关 性 。PHP 非常 利 
于 快速 开发 各 种 功能 不 同 的 定制 网 站 ,运行 成 本 低 。 其 不 足 之 处 是 运行 环境 的 安装 .配置 比 





较 复杂 
都 比较 


3. 


JSP 


术 。 在 
脚本 在 





























;同时 ,由 于 PHP 内 部 结构 上 的 缺陷 ,使 得 PHP 在 复杂 的 大 型 项 目 上 的 开发 和 维护 
困难 。 


JSP(Java Server Pages) 


是 由 Sun 公司 推出 的 , 它 是 基于 Java Servlet 以 及 整个 Java 体系 的 Web 开发 技 
HTML 文档 中 嵌入 Java 程序 片段 (Scriptlet) 和 JSP 标记 就 形成 了 JSP 文件 。JSP 
区 务 器 端 运 行 ,可 以 跨 UNIX、Linux、Windows 平台 使 用 ,具有 平台 无 关 性 。JSP 代 


码 须 编译 成 Servlet 并 由 Java 虚拟 机 执行 ,编译 操作 仅 在 对 JSP 页 面 的 第 一 次 请 求 时 发 生 。 


JS 





2 最 大 的 好 处 就 是 开发 效率 高 ,可 以 使 用 JavaBeans 或 者 EJB (Enterprise 


JavaBeans) 来 执行 应 用 程序 所 要 求 的 复杂 处 理 , 但 这 种 网 站 架构 因为 其 业务 规则 代码 与 页 
面 代码 混 为 一 体 , 不 利于 维护 ,因此 不 适应 大 型 应 用 的 要 求 , 取 而 代 之 的 是 基于 MVC 的 
Web 架构 。 通 过 MVC 的 Web 架构 可 以 弱化 各 个 部 分 的 耦合 关系 ,并 将 业务 迎 辑 处 理 与 页 
面 以 及 数据 分 离开 来 ,这 样 当 某 个 模块 的 代码 改变 时 ,并 不 影响 其 他 模块 的 正常 运行 。 因 
此 ,不 少 国外 的 大 型 企业 系统 和 商务 系统 都 使 用 基于 Java 的 MVC 架构 ,能 够 支持 高 度 复 


杂 的 基 


4. 





于 Web 的 大 型 应 用 。 
Python 


Python 是 由 荷兰 人 Guido van Rossum 发 明 、 于 1991 年 公开 发 行 的 一 种 脚本 语言 。 它 
是 面向 对 象 的 ,解释 型 的 程序 设计 语言 。Python 是 纯粹 的 自由 软件 。 由 于 Python 的 简洁 
性 、 易 读 性 以 及 可 扩展 性 , 它 一 经 问世 后 就 迅速 地 流行 开 来 ,并 被 逐渐 广泛 地 应 用 于 系统 管 


理 任务 的 处 理 和 Web 编程 。 
Python 具有 高 度 的 可 阅读 性 。 它 使 用 了 限制 性 很 强 的 语法 ,其 中 重要 的 一 项 就 是 缩 进 




















规则 ,通过 强制 程序 员 缩 进 ( 包 括 让 ,for 和 函数 定义 等 所 有 需要 使 用 模块 的 地 方 ) 使 得 程序 
更 加 清晰 和 具有 可 读 性 。 














Python 既 支 持 面向 过 程 的 编程 也 支持 面向 对 象 的 编程 。 在 “面向 过 程 ” 的 语言 中 ,程序 

















是 由 过 程 或 仅仅 是 可 重用 代码 的 函数 构建 起 来 的 。 在 “面向 对 象 * 的 语言 中 ,程序 是 由 数据 














和 功能 组 合 而 成 的 对 象 构建 起 来 的 。 


























Python 本 身 被 设计 为 可 扩充 的 。Python 提供 了 丰富 的 API 和 工具 ,以 便 程序 员 能 够 
轻松 地 使 用 C 语言 .C++ 等 语言 来 编写 扩充 模块 。Python 编译 器 本 身 也 可 以 被 集成 到 其 他 
需要 脚本 语言 的 程序 内 。 因 此 ,Python 常 被 昵称 为 胶水 语言 ,能 够 将 用 其 他 语言 编写 的 程 
序 进行 集成 和 封装 。 
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ASP. NET 是 在 Microsoft .NET 框架 的 基础 上 构建 的 ,可 提供 构建 企业 级 Web 应 用 
程序 所 需 服务 的 一 个 Web 平台 。ASP. NET 与 Microsoft . NET 框架 平台 紧密 结合 是 
ASP. NET 的 最 大 特点 。 本 书 使 用 的 是 2015 年 7 月 正式 发 行 的 ASP. NET 4.6 与 Visual 
Studio 2015 。 


1.3.1 Microsoft .NET Framework 


.NET 是 一 种 面向 网 络 .支持 各 种 用 户 终 端的 开发 平台 环境 。 在 . NET 平台 上 ,不 同 网 
站 间 通 过 相关 协定 联系 在 一 起 ,形成 自动 交流 ,协同 工作 的 模式 ,为 系统 提供 全 面 的 服务 。 

.NET Framework 是 一 个 集成 在 Windows 中 的 组 件 ,是 为 其 运行 的 应 用 程序 提供 各 种 
服务 的 托管 执行 环境 ,如 图 1-6 所 示 。 它 主要 包括 两 个 组 件 , 即 公共 语言 运行 时 (Common 
Language Runtime,CLR) 和 .NET Framework 类 库 (. NET Framework Class Library) 。 





1-6 .NET Framework 


1. 公共 语言 运行 时 (CLR) 


CLR 是 . NET Framework 的 基础 。 它 为 执行 用 . NET 脚本 语言 编写 的 代码 提供 了 一 
个 运行 环境 。CLR 管理 . NET 代码 的 执行 ,提供 内 存 管理 ,线程 管理 、 代 码 执行 、 安 全 验证 、 
远程 处 理 等 服务 ,并 保证 应 用 和 底层 操作 系统 之 间 必 要 的 分 离 。 同 时 ,CLR 使 得 开发 人 员 
可 以 调试 和 进行 异常 处 理 。 如 果 要 执行 这 些 任务 ,需要 遵循 公共 语言 规范 (Common 
Language Specification,CLS) 。CLS 描述 了 运行 库 能 够 支持 的 数据 类 型 的 子 集 。 

在 CLR 监视 之 下 运行 的 程序 属于 受 控 代码 ,也 叫 托管 代码 (Managed codes)。 不 在 
CLR 监视 之 下 、 直 接 在 裸 机 上 运行 的 应 用 或 者 组 件 叫 非 托 管 代码 (Unmanaged codes) 。 





2. .NET Framework 类 库 


.NET Framework 类 库 是 一 个 与 CLR 紧密 集成 的 .面向 对 象 的 .可 重用 的 类 型 集合 。 
它 是 生成 . NET 应 用 程序 、 组 件 和 控件 的 基础 ,包括 . NET 脚本 语言 .CLS.、. NET 
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Framework 类 库 .CLR、Visual Studio. NET 集成 开发 环境 等 。 
.NET Framework 是 用 于 构建 .开发 以 及 运行 Web 应 用 程序 和 Web Service 的 公共 环 
它 主要 由 3 个 部 分 组 成 , 即 编程 语言 .服务 器 端 和 客户 端 技术 、 开 发 环境 。 


境 。 
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1. 





编程 语言 

C#( 读 作 C sharp) : C# 是 一 种 简洁 、 类 型 安全 的 、 面 向 对 象 的 语言 , 它 是 Microsoft 
公司 专门 为 . NET 量 身 定做 、 为 生成 在 . NET Framework 上 和 运行 的 应 用 程序 而 设计 
的 。C 上 从 C 和 C++ 衍生 而 来 ,更 像 Java。 使 用 C# 可 以 创建 XML Web Services、 
分 布 式 组 件 、 客 户 端 /服务 器 应 用 程序 数据库 应 用 程序 等 。 

Visual Basic (VB. NET): Visual Basic. NET 是 从 Visual Basic 语言 演变 而 来 , 面 
向 . NET Framework、 能 生成 类 型 安全 和 面向 对 象 应 用 程序 的 一 种 语言 。VB. NET 
是 Visual Studio . NET 的 一 部 分 ,是 一 套 完整 的 ,可 生成 企业 级 Web 应 用 程序 的 开 
发 工具 。 

上 #( 读 作 J sharp): J# 是 一 种 供 Java 程序 员 构建 在 . NET Framework 上 和 运行 的 应 
用 程序 和 服务 的 语言 。 

民 务 器 端 和 客户 端 技术 

ASP. NET(Active Server Pages. NET) : ASP.NET 是 建立 在 . NET Framework 之 
上 ,利用 CLR 在 服务 器 端 为 用 户 提 供 建立 强大 的 企业 级 Web 应 用 服务 的 编程 框 
架 。ASP. NET 主要 包括 Web Form 和 Web Service 两 种 编程 模型 ,前 者 提供 建立 
功能 强大 的 、 基 于 Form 的 可 编程 Web 页 面 ,后 者 提供 在 异 构 网 络 环境 下 获取 远程 
服务 .连接 远程 设备 .交互 远程 应 用 的 编程 界面 。 

Windows Forms (Windows desktop solutions ) : Windows Forms 是 . NET 
Framework 的 智能 客户 端 组 件 , 用 于 创建 应 用 程序 和 用 户 界 面 。Windows Forms 
应 用 程序 是 基于 System. Windows. Forms 命名 空间 中 的 类 ,通过 在 窗 体 上 放置 控 
件 并 对 用 户 操作 (如 鼠标 单 击 ) 进 行 响应 来 构建 。 

Compact Framework(PDA/Mobile solutions): Compact Framework 是 为 了 在 移动 
设备 和 嵌入 式 设 备 上 运行 而 设计 的 。 它 包含 .NET Framework 中 的 类 库 的 子 集 , 同 
时 还 包含 一 些 专 有 类 。 

开发 环境 (Development Environments) 

Visual Studio: Visual Studio 是 一 个 完整 的 集成 开发 环境 (Integrated Development 
Environment,IDE) ,用 于 生成 ASP.NET Web 应 用 程序 .XML Web Services、 桌 面 
应 用 程序 和 移动 应 用 程序 。VB. NET、Visual C++. NET、Visual C# . NET 和 和 
Visual J# . NET 全 都 使 用 相同 的 IDE ,该 环境 允许 它们 共享 工具 并 有 助 于 创建 混 
合 语言 解决 方案 。 
Visual Web Developer: Visual Web Developer 是 一 个 功能 齐备 的 开发 环境 ,可 用 于 
创建 ASP. NET Web 应 用 程序 。Visual Web Developer 提供 网 页 设计 、 代 码 编辑 、 
测试 和 调试 ,以 及 将 Web 应 用 程序 部 署 到 承载 服务 器 等 功能 。 


3.2 ASP.NET 的 工作 原理 








































































































ASP.NET 的 工作 原理 如 图 1-7 所 示 。 
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Server 回 Web 服 务 器 寻找 ASPX 文 件 
服务 器 @ ASP.NET 代 码 被 发 送 给 CLR 进 行 编译 


Ce 
四 浏览 器 请 求 ASPX 文 件 回 浏览 器 处 理 HTML 并 显示 页 面 


Browser 
浏览 器 
图 1-7 首次 请 求 ASP. NET 页 面 的 处 理 过 程 


(1) Web 浏览 器 发 送 一 个 HTTP 请 求 到 Web 服务 器 ,要 求 访问 一 个 Web 网 页 。 

(2) Web 服务 器 分 析 这 个 HTTP 请 求 , 定 位 所 请 求 的 Web 网 页 的 位 置 。 

(3) 如 果 请 求 的 网 页 是 一 个 HTML 文件 , 则 服务 器 直接 返回 该 文件 。 如 果 请 求 的 是 
ASP. NET 文件, 那么 IIS 就 把 该 文件 传送 到 aspnet_isapi. dll 进行 处 理 , 后 者 把 ASP. NET 
代码 提交 给 CLR。 若 是 首次 请 求 该 ASP. NET 文件 ,就 由 CLR 编译 并 执行 ,得 到 纯 
HTML 结果 ; 若是 已 经 执行 过 这 个 文件 ,就 直接 执行 编译 好 的 程序 并 得 到 纯 HTML 结果 。 

(4) 把 从 (3) 中 得 到 的 HTML 文件 传 回 浏览 器 作为 HTTP 响应 。 

(5) 浏览 器 收 到 这 个 响应 之 后 就 可 以 显示 Web 网 页 。 


1.3.3 ASP.NET 开发 的 4 种 模式 


ASP. NET 包括 4 种 不 同 的 开发 模式 , 即 Web Forms、Web Pages、Single Page 
Applications 和 MVC, 如 图 1-8 所 示 。 
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图 1-8 ASP. NET 的 4 种 开发 模式 






































1. Web Forms 


Web Forms(Web 窗 体 ) 是 最 传统 的 ASP. NET 编程 模式 , 它 是 整合 了 HTML、 服 务 器 
控件 和 服务 器 代码 的 事件 驱动 网 页 。Web Forms 是 在 服务 器 上 编译 和 执行 的 ,再 由 服务 器 
生成 HTML 网 页 。Web Forms 包含 大 量 的 Web 控件 和 组 件 , 开 发 人 员 可 以 轻松 地 在 Web 
Forms 中 拖 放 各 种 控件 ,并 通过 响应 页 面 和 控件 的 各 种 事件 来 快速 开发 Web 应 用 。 















































2. Web Pages 























Web Pages (Web 页 面 ) 是 最 简单 的 ASP. NET 网 页 开发 编程 模型 ,用 于 创建 
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ASP. NET 网 站 和 Web 应 用 程序 。 它 提供 了 一 种 简单 的 方法 将 HTML、CSS、JavaScript 以 
及 服务 器 代码 结合 起 来 。 它 类 似 于 PHP 和 ASP, 围 绕 单一 网 页 进行 构建 ,服务 器 脚本 使 
Visual Basic 或 C# ,对 HTML、CSS、JavaScript 可 以 完全 控制 。Web Pages 通过 可 编程 的 
Web Helpers 进行 扩展 ,包括 数据 库 、 视 频 、 图 像 、 社 交 网 络 等 。 





























3. MVC 











MVC(Model View Controller, 模 型 -视图 -控制 器 ) 是 用 于 构建 Web 应 用 程序 的 一 种 框 
架 。MVC 架构 降低 了 程序 间 的 耦合 性 ,把 一 个 Web 应 用 的 输入 、 处 理 、 输 出 流程 按照 
Model、View、Controller 的 方式 进行 分 离 。Model( 模 型 ) 是 处 理应 用 程序 数据 逻辑 的 部 分 ， 
负责 在 数据 库 中 存 取 数据 。View( 视 图) 是 处 理 数 据 显示 的 部 分 , 它 依 据 模 型 数据 创建 。 
Controller( 控 制 器 ) 是 处 理 用 户 交互 的 部 分 ,负责 从 View 读 取 数据 ,控制 用 户 输入 ,并 向 
Model 发 送 数据 。MVC 分 层 有 助 于 管理 复杂 的 应 用 程序 ,让 应 用 程序 的 测试 更 加 容易 。 
MVC 交互 示意 图 如 图 1-9 所 示 。 
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图 1-9 MVC 交互 示意 图 

































































4. Single Page Applications 


Single Page Applications( 单 页 的 Web 应 用 程序 ,SPA) 与 标准 的 MVC 和 Web Forms 
方法 不 同 , 它 只 有 一 个 Web 应 用 页 面 ,所 有 的 业务 功能 都 是 它 的 子 模块 ,通过 特定 的 方式 链 
接 到 该 Web 应 用 页 面 上 。 浏 览 器 一 开始 会 加 载 该 页 面 上 的 HTML、CSS 和 JavaScript 代 
人 码 ,之 后 由 JavaScript 来 控制 该 页 面 上 所 有 业务 功能 的 操作 。SPA 是 AJAX 技术 的 进一步 
升华 ,把 AJAX 的 无 刷新 机 制 发 挥 到 极致 ,减少 了 应 用 程序 响应 用 户 操作 的 时 间 , 提 供 了 与 
桌面 应 用 程序 类 似 的 、 更 流畅 的 用 户 体 验 。 




















(1.4 建立 ASP.NET 运行 和 开发 环境 


如 果 要 运行 Web 程序 ,必须 首先 建立 一 个 Web 服务 器 ,然后 从 任 一 台 Web 浏览 器 访 
问 该 服务 器 上 的 Web 程序 。 建 立 ASP. NET 的 运行 环境 需要 安装 Web 服务 器 IIS 和 
.NET Framework 。 

如 果 要 运行 ASP. NET 程序 ,首先 应 在 服务 器 上 设置 网 站 的 根 目录 ,并 将 网 页 文件 放 
在 该 目录 下 ,然后 在 IIS 管理 器 上 建立 一 个 指向 网 站 根 目录 的 虚拟 目录 ,最 后 在 浏览 器 地 址 
栏 中 输入 相应 的 地 址 (通常 包含 虚拟 目录 ) 运 行 ASP. NET 程序 即 可 。 
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如 果 要 编写 和 调试 ASP. NET 程序 ,通常 选择 Visual Studio 集成 开发 环境 。 本 书 以 当 
前 主流 配置 的 Visual Studio 2015 为 主要 开发 环境 进行 讲解 。 


1.4.1 安装 和 配置 Web 服务 器 


IIS(Internet Information Server, 互 联网 信息 服务 ) 是 ASP. NET 唯一 可 以 使 用 的 Web 
服务 器 ,目前 常用 的 版 本 是 IIS 7。 下 面 以 Windows 7 为 例 简 述 IIS 7 的 安装 和 配置 过 程 。 


1. 安装 IIS 


(1) 在 “控制 面板 ”中 选择 “打开 或 关闭 Windows 功能 ”, 这 是 一 个 触发 UAC 的 操作 ,如 
果 Windows 7 没有 关闭 UAC, 则 会 弹出 提示 信息 ,确认 并 继续 。 
(2) 如 果 仅 需 要 IIS 7. 0 支持 静态 内 容 , 可 直接 选中 “Internet 信息 服务 ”, 如 果 希 望 支持 
动态 内 容 , 则 需 展开 “万 维 网 服务 ”分支 ,将 所 需 的 选项 全 部 选中 。 
(3) 单 击 “ 确 定 ” 按 钮 ,Windows 7 即 启动 IIS 的 安装 过 程 。 
(4) 安装 完成 后 打开 浏览 器 输入 “http://localhost/”, 检 查 IIS 是 否 正常 。 如 果 出 现 IIS 的 
信息 页 面 , 则 表示 JS 安装 成 功 ,如 图 1-10 所 示 。 此 时 通常 会 在 C 盘 上 自动 创建 文件 夹 
inetpub,“C:\inetpub” 是 IIS 的 默认 目录 。"“C:\inetpub\wwwroot” 是 默认 的 Web 主页 地 址 。 
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图 1-10 JIIS 7 安装 成 功 


2. 设置 虚拟 目录 


假设 ASP. NET 文件 hello. aspx 存放 在 服务 器 上 的 某 一 目录 (C:\myWebSite) 里 ,如 
例 1-1 所 示 。 
例 1-1 一 个 简单 的 ASP. NET 程序 (01-01. aspx) 。 








< 多 @page language = "C#" %> 
< html > 
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<body> 

<s% 

Response. Write( "hello world. "); 
第 > 

</body> 

</html > 


下 面 介绍 如 何 建立 虚拟 目录 ,以 及 运行 该 程序 的 方法 。 

(1) 选择 “控制 面板 ”中 的 “系统 与 安全 ”, 再 选择 “管理 工具 ”, 双 击 “Internet 信息 服务 
(IS) 管 理 器 ”。 

(2) 展开 “网 站 ”项 ,选择 Default Web Site, 单 击 “ 查 看 虚拟 目录 ”, 在 弹出 的 对 话 框 中 选 
择 “ 添 加 虚拟 目录 ”, 输 入 别名 myWebSite, 并 选择 物理 路 径 *C:\myWebSite” ,至 此 建立 了 
一 个 别名 为 myWebSite 指向 C:\myWebSite 的 虚拟 目录 。 

在 浏览 器 中 输入 以 下 地 址 就 可 以 看 到 如 图 1-11 所 示 的 结果 。 








http://localhost/myWebSite/hello. aspx 


Oe vere po 
jc 
hmpy//ocalhosWmyWebShe/helloaspr 





图 1-11 测试 和 运行 ASP. NET 程序 
如 果 源 文件 放 在 二 级 目录 下 ,例如 “C:\myWebSite\chapterl\hello. aspx”, 那 么 在 浏览 
器 中 输入 以 下 地 址 也 可 以 得 到 同样 的 运行 结果 。 


http://localhost/myWebsite/chapterl/hello. aspx 


1.4.2 安装 Visual Studio 开发 环境 


如 果 要 安装 Visual Studio 开发 环境 ,必须 首先 安装 . NET Framework, 然 后 再 安装 
Visual Studio 工具 包 。 本 书 选择 安装 Visual Studio 2015 开发 工具 包 。 

Microsoft Visual Studio 2015 安装 程序 通常 自 带 . NET Framework 4.6, 后 者 也 可 从 
Microsoft 官方 网 站 www. microsoft. com/downloads” 下 载 。Visual Studio 2015 最 常用 的 
版 本 目前 有 3 个 , 即 专业 版 ,企业 版 和 社区 版 ,如 表 1-2 所 示 。 
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表 1-2 Visual Studio 2015 的 版 本 
版 本 说 明 
面向 个 人 开发 者 ,可 执行 基本 开发 任务 ,提供 集成 开发 环境 、 开 发 平台 支持 、 测 
试 工具 等 
Enterprise( 企 业 版 ) 具备 高 级 功能 的 企业 级 解决 方案 ,面向 应 对 各 种 规模 或 复杂 程度 项 目的 团队 


Visual Studio 的 免费 版 本 , 仅 供 个 人 使 用 免费 ,面向 构建 非 企业 应 用 程序 的 开 
发 人 员 





Professional( 专 业 版 ) 








Community( 社 区 版 ) 





基于 普遍 性 的 考虑 ,本 书 将 安装 Visual Studio 2015 Community 版 ,简称 VS 2015 
Community。 用 户 可 以 通过 下 载 一 个 ISO 镜像 文件 进行 安装 ,安装 的 初始 界面 如 图 1-12 
所 示 。 





vA Visual Studio 


Community 2015 


远 择 安 甘 位置 


安装 程序 在 所 有 葬 动 右 中 最 多 雪 要 10 GB 


Web and Desktop features 
2 壬 功 能 


安装 后 ,你 可 通过 “控制 面板 程序 和 功能 ” 隧 时 么 加 或 箱 除 其 他 
功能 。 





图 1-12 Visual Studio 2015 社区 版 的 安装 界面 


Visual Studio 2015 Community 除了 最 基本 的 功能 之 外 ,还 提供 一 些 可 选 功 能 。 为 了 
人 本 书 选择 了 默认 安装 
安装 完成 后 首次 启动 V VS 2015 Community, 选择 默认 的 环境 设置 ,然后 进入 如 图 1-13 
所 示 的 起 始 页 。 
通常 ,开发 ASP. NET 程序 的 第 一 步 就 是 创建 一 个 新 网 站 。 选 择 " 文 件 ” 一 "新建 ”一 
“网 站 ”命令 ,打开 “新 建 网 站 ”对 话 框 ,如 图 1-14 所 示 。 Ee NET 空 网 站 ”, 输 入 网 站 
的 文件 夹 位 置 , 然 后 单 击 “ 确 定 ” 按 钮 ,Visual Studio 2015 将 创建 一 个 空 网 站 项 目 。 
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图 1-13 Visual Studio 2015 的 起 始 页 
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图 1-14 “新 建 网 站 ”对话 框 


从 “网 站 ”菜单 中 选择 “添加 新 项 ”, 然 后 选择 “Web 窗 体 ”, 则 添加 一 个 ASP. NET 页 面 。 
单 击 “ 添 加 ”按钮 ,进入 如 图 1-15 所 示 的 Visual Studio 2015 集成 开发 环境 (IDE) 的 主 界面 。 

IDE 主 界面 可 分 为 4 个 部 分 ,图 中 用 编号 一 @ 进 行 标注 。 各 部 分 都 能 按照 用 户 的 选 
择 进 行 移动 悬 靠 和 全 加 ,下 面 逐 一 说 明 。 


















































第 1 章 “” Web 程序 设计 基础 fs) 


DO Webappicaont -Mecrosoh Vasel SeodiofE a) Wace co Pr 
HD WBE MBVM Pam Gm) WAD) BAM) xOl IAD Wes) 全 WIN OW Wool 开本 
上 -是 | 旭 -名 日 出 1 -人 -| oo mc 3 moO- FB 1 ome ms . - 
sob-s6rmop— 
[人 
加 篇 交 方 案 -WebApplicationd” [1 个 天 目 ) 
一 webapplcation4 


血 
丑 
日 
EE 
回 
EE 
国 
9 
~. 
A 
日 
目 
目 
A 
9 
vi 
间 ， 
n 
Ed 
图 


[mem [bea | om 





图 1-15 IDE 主 界面 


(1) 区 域 为 “工具 箱 ”, 悬 靠 在 IDE 的 左边 ,用 于 选取 控件 。 

(2) 区 域 @ 为 “代码 区 ”, 位 于 IDE 的 中 间 部 分 ,可 选择 不 同 视图 来 设计 源 代码 和 页 面 
代码 。 

(3) 区 域 @ 为 "解决 方案 资源 管理 器 ”, 一 般 悬 靠 在 IDE 的 右上 部 ,分 不 同 选 项 卡 进行 显 
示 。 解 决 方案 资源 管理 器 用 于 显示 项 目 中 的 文件 。 

(4) 区 域 @ 为 “属性 窗口 ”, 一 般 悬 靠 在 IDE 的 右 下 部 ,用 于 设置 区 域 @ 里 面 所 选中 控件 
的 属性 。 

在 上 述 页 面 中 拖 电 工具 箱 中 不 同 的 控件 以 及 编写 Web 页 面 的 执行 代码 ,就 可 以 对 
Web 页 面 进行 自由 设计 了 。 


1.4.3 创建 一 个 ASP.NET Web 站 点 


建立 一 个 新 的 ASP. NET Web 站 点 的 步骤 如 下 : 





1. 创建 一 个 ASP.NET 空 网 站 





启动 Visual Studio 2015 ,选择 "文件 ”一 "新建 > 网 站 ”命令 ,在 弹出 的 "新建 网 站 ”对 
话 框 中 选择 "ASP. NET 空 网 站 ”, 选 择 Web 位 置 之 后 单 击 “ 确 定 ” 按 钮 ,此 时 Visual Studio 
2015 会 自动 创建 一 个 只 含有 Web. config 配置 文件 的 空 网 站 ,以 及 一 个 空 的 数据 目录 。 


2. 在 网 站 中 建立 一 个 新 的 Web 页 面 


选择 “网 站 ”一 “添加 新 项 ”, 则 可 以 添加 一 个 新 的 Web 窗 体 页 面 , 这 时 系统 会 自动 创建 
一 个 默认 页 面 , 即 Default. aspx 和 Default. aspx. cs 两 个 文件 ,前 者 是 当前 页 面 布局 的 
XHTML 代码 ,后 者 是 当前 页 面 对 应 的 C# 程 序 代 码 。 
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在 新 添加 的 Web 窗 体 中 单 击 下 方 的 “设计 ”标签 进入 设计 视图 ,从 左 侧 工具 箱 中 直接 拖 


























归 一 个 TextBox 控件 .一 个 Button 控件 以 及 一 个 Label 控件 到 设计 窗口 中 ,如 图 1-16 所 
示 。 单 击 “* 源 ”标签 , 则 看 到 当前 页 面 的 XHTML 代码 , 即 Default. aspx 文件 中 的 内 容 。 
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图 1-16 Web 页面 的 设计 视图 


3. 编写 Web 页 面 的 程序 代码 


在 Web 页面 的 布局 规划 好 后 就 开始 编写 页 面 的 程序 代码 了 。 如 果 单 击 图 1-16 下 方 的 
“设计 ”标签 ,然后 选中 并 双击 Button 控件 , 则 打开 Default. aspx. cs 的 设计 页 面 ,就 可 以 编 
写 相应 的 C# 程 序 代 码 了 。 假 设 只 编写 Buttonl_Click 事件 的 代码 ,最 后 得 到 的 代码 如 下 。 


using System; 
using System. Collections. Generic; 
using System. Linqg; 
using System. Web; 
using Systenm. Web. UI; 
using System. Web. UI. WebControls; 
public partial class Default : System. Web.UI. Page 
{ 
protected void Page Load(object sender, EventArgs e) { 
3 
protected void Buttonl Click(object sender, EventArgs e) { 
Labell1. Text = "欢迎 进入 BookShop 购物 网 站 !"; 
} 


4. 调试 运行 网 站 程序 


在 该 网 站 的 页 面 和 程序 代码 设计 完成 后 编译 并 运行 网 站 程序 ,图 1-17 所 示 为 运行 的 简 
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单 网 站 页 面 。 此 时 在 文本 框 中 输入 内 容 , 单 击 “ 确 定 ” 按 钮 ,在 Label 标签 的 位 置 将 显示 程序 
的 运行 结果 。 


LS hep//iocalhost L123 P ~ © | S localhort 











图 1-17 程序 的 运行 结果 


5. 网 站 的 正式 发 布 
打开 VS 的 “解决 方案 资源 管理 器 ”中 的 myWebSite, 单 击 “ 发 布 网 站 ”按钮 ,如 图 1-18 
所 示 ,选择 目标 位 置 后 单 击 “ 确 定 ” 按 钮 。 


EE Te rr 


di 二 
[cr EE 
Di\precompiledWeb\BookShop 

| et) 
站 信用 国定 全 公 和 关公 

Dnt) 

门 对 台 六 全 友信 启用 到 二名 (5] 


加 使 用 由 强 名 称 械 具 生 成 的 室 角 文件 (U 
窗 胃 文件 位 置 : 














| 了 





I 


| 


中 口才 AlowpartialyTrustedCallerAtribute (APTCAJ 导 局 悍 床 要 (MD 





Ee 











图 1-18 发 布 预 编译 完成 的 网 站 


打开 计算 机 管理 中 的 “Internet 信息 服务 (11S) 管理 器 ”, 右 击 “ 网 站 ”, 打 开 “ 添 加 网 站 ”对 
话 框 ,如 图 1-19 所 示 。 在 此 输入 “网 站 名 称 ”“ 物 理 路 径 “ 主 机 名 ”等 信息 。 其 中 ,网 站 名 称 
为 BookShop; 主机 名 为 已 申请 的 域名 ,也 可 以 不 填 , 直 接 使 用 IP 地 址 访问 。 最 后 单 击 “ 确 
定 ” 按 钮 关闭 该 对 话 框 。 

添加 完成 后 右 击 刚 添加 的 网 站 BookShop, 选 择 “ 添 加 虚拟 目录 ”, 填 写 别 名 并 选择 网 站 
的 物理 路 径 , 单 击 “ 确 定 ” 按 钮 ,如 图 1-20 所 示 ,至 此 完成 了 该 网 站 的 发 布 。 

打开 浏览 器 ,在 地 址 栏 中 输入 “http://127. 0. 0. 1/MyBookShop/Default. aspx”, 则 可 


访问 已 经 发 布 的 Web 网 站 ,如 图 1-21 所 示 。 
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图 1-21 访问 已 发 布 的 网 站 
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(1.5 习题 与 上 机 练习 
A 























1. 填空 题 
(1) 定义 了 Web 浏览 器 和 Web 服务 器 之 间 交 换 数据 的 过 程 以 及 数据 本 身 的 
格式 ,是 客户 机 与 服务 器 交互 遵守 的 协议 。 
(2) ASP. NET 的 工作 模式 基于 模式 以 及 原理 。 
(3) 如 果 不 使 用 全 地 址 ,可 以 使 用 来 访问 本 机 上 的 默认 Web 主页 。 
2. 选择 是 
(1) 下 列 ( ) 方 式 无 法 正常 浏览 ASPX 文件 的 运行 结果 。 
A. http://localhost/test. aspx B. http://127.0.0.1/test. aspx 
C. http://IP 地 址 /test. aspx D. 在 浏览 器 地 址 栏 直接 输入 test. aspx 
(2) 在 客户 端 网 页 脚本 语言 中 最 为 通用 的 是 ( ) 。 
A. JavaScript B. VB C. Perl D. ASP 
3. 简 答题 


(1) C/S 结构 与 B/S 结构 有 什么 区 别 ? 

(2) 简 述 ASP. NET 页 面 的 处 理 过 程 。 为 什么 第 一 次 执行 的 时 候 ASP. NET 程序 执行 
的 很 慢 ? 

(3) 客户 端 脚本 语言 和 服务 器 端 脚本 语言 有 什么 区 别 ? 

4. 上 机 练习 


参照 1.4. 3 节 所 描述 的 步骤 试 着 创建 一 个 网 站 页 面 。 


HTML、XML 与 CSS 


Web 页 面 主要 通过 HTML 和 CSS 表达 信息 。HTML 定义 了 Web 网 页 的 结构 ,用 固 
有 标记 来 描述 和 显示 页 面 内 容 , CSS 则 用 于 定义 HTML 页 面 在 浏览 器 中 的 显示 效果 。 
HTML、CSS、 图 形 、 脚 本 一 起 构成 了 Web 页 面 与 Web 应 用 的 基础 。 

XML 与 HTML 在 Web 应 用 开发 中 有 着 密切 的 关系 。XML 定义 了 Web 信息 本 身 的 
数据 形式 和 结构 ,不 能 描述 网 页 的 外 观 和 内 容 。 

本 章 将 从 基本 的 HTML5 语法 开始 介绍 使 用 日 TML、XML 的 基本 知识 ,最 后 利用 CSS 
对 HTML 网 页 进行 布局 。 





@.1， 使 用 HTML 组 织 页 面 内 容 


HTML(HyperText Marked Language, 超 文本 标记 语言 ) 是 Web 页 的 标记 语言 ,通过 
一 定 的 格式 标记 文本 及 图 像 等 元 素 , 使 之 在 浏览 器 中 显示 出 不 同 内 容 和 风格 的 网 页 。 

HTML 文档 通过 浏览 器 在 WWW 上 发 布 ,并 独立 于 各 种 操作 系统 平台 。 一 个 Web 页 
面 就 是 一 个 HTML 文档 。Web 页 面 也 就 是 人 们 通常 所 说 的 网 页 ,在 本 书 中 不 作 区 分 。 
HTML 文件 本 身 是 一 种 文本 文件 ,通过 在 文件 中 添加 各 种 标记 告诉 浏览 器 如 何 显示 网 页 内 
容 。 浏 览 器 按 顺 序 解释 执行 HTML 文件 ,但 不 同 的 浏览 器 对 于 同一 标记 可 能 有 不 同 的 显 

2012 年 12 月, 万维网 联盟 (World Wide Web Consortium,W3C) 正 式 推出 HTML5 规 
范 , 这 一 重大 版 本 被 称 为 “开发 Web 网 络 平台 的 黄 基 石 ”。HTML5 将 Web 带 入 一 个 全 新 
的 应 用 平台 ,在 此 之 上 ,视频 、 音 频 、 动 画 以 及 和 PC 的 交互 都 被 标准 化 。 


2.1.1 HTML 文档 的 基本 结构 


HTML 文档 分 为 文档 头 和 文档 体 两 部 分 ,文档 头 对 当前 文档 进行 了 一 些 必 要 的 定义 ， 
文档 体 才 是 要 显示 的 各 种 信息 。 
下 面 是 一 个 最 基本 的 HTML 文档 结构 : 


<!doctype html > // 文 档 类 型 
< html > // 文 档 开 始 
<head> // 文 档 头 开始 


<meta charset ="utf - 8"> // 属 性 标记 


<title> </title> 
</head> 
<body> 
</body > 
</html> 


1. 文档 类 型 标记 


// 文 档 标题 
// 文 档 头 结束 
// 文 档 体 开 始 
// 文 档 体 结束 
// 文 档 结束 
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和 以 前 版 本 的 HTML 相 比 ,HTML5 简化 了 文件 类 型 定义 ,只 要 编写 以 下 程序 语句 


即 可 : 


<! doctype html > 


2. 文档 开始 和 结束 标记 


HTML 文档 的 开始 标记 是 < html >、 结 束 标 记 是 </html >。 所 有 其 他 标记 都 必须 置 于 
<html > 和 </html > 标记 之 间 ,否则 浏览 器 将 忽略 不 在 其 间 的 标记 。 


3. 文档 头 标记 


HTML 文档 的 头 标 记 是 < head > 和 </head >, 用 于 初始 化 文档 信息 。 

在 头 标记 < head > 中 包括 了 标题 标记 < title > 和 属性 标记 < meta >。 

< title > 和 </title > 之 间 的 内 容 是 当前 网 页 的 标题 。< meta > 标记 用 于 指定 HTML 文 
档 的 特殊 属性 , 它 是 一 个 单 标记 。 例 如 : 


<head> 


<title> 我 的 第 一 个 网 页 </title> 
<meta charset = "utf - 8"> 


</head > 


4. 文档 主体 标记 


HTML 文档 的 主体 标记 是 < body > 和 </body >, 它 是 HTML 文档 最 核心 的 部 分 , Web 


页 面 的 主要 内 容 都 放 在 这 里 。 





它 的 语法 格式 如 下 : 


<body [background = 并 | bgcolor = 井 | text = 并 | link= 井 | alink= 并 | vlink=#| leftmargin= 


并 | topmargin = 并 ]> 


</body > 


5. 文档 结构 标记 


在 以 前 的 HTML 页 面 中 





,大 家 基本 采用 Div 十 CSS 的 页 重 























布局 方式 。 由 于 Div 中 的 内 











容 无 法 从 Div 标记 本 身 来 判断 ,而 是 通过 class 和 id 等 属性 进行 区 分 ,并 通过 不 同 的 CSS 样 
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式 来 处 理 , 这 就 导致 整个 HTML 文档 内 容 和 结构 定义 不 清晰 。 在 HTML5 中 为 了 解决 这 
个 问题 ,专门 添加 了 页 眉 、 页 脚 、 导 航 等 许多 语义 化 的 、 跟 结构 相关 的 结构 元 素 标签 , 这 就 使 
得 HTML 文档 更 加 清晰 、 可 阅读 性 更 强 , 如 图 2-1 所 示 。 


<article> 


<section> “aside> 





<footer> 


图 2-1 HTML5 定义 的 一 种 文档 结构 


与 之 相关 的 HTML 代码 如 下 : 


<body> 

<header >...</header > 

<nav>...</nav > 

<article> 
<section>...</section> 

</article> 

<aside>...</aside> 

<footer >...</footer > 

</body > 


上 述 HTML5 结构 化 标记 的 含义 如 表 2-1 所 示 。 
表 2-1 HTMLS 的 结构 化 标记 
标记 说 明 
定义 文档 的 页 眉 ,通常 是 一 些 引导 和 导航 信息 ,如 商标 ,标题 等 。 通 常 < header ~ 标签 至 少 包含 
-个 标题 字体 标记 (< hl > 到 < h6 >) 

nav 定义 页 面 的 导航 链接 ,如 menu 等 
aside “| 定义 当前 页 面 的 附属 信息 ,如 侧 边栏 .广告 ,成 组 的 链接 等 
footer | 定义 当前 页 面 或 section 的 页 脚 ,如 版 权 信息 、 隐 私 声明 等 
section | 定义 文档 中 的 节 , 如 章节 、 页 眉 、 页 脚 或 文档 中 的 其 他 部 分 
article | 定义 一 个 独立 .完整 的 文档 内 容 块 , 如 论坛 帖子 ,博客 文章 等 。article 可 以 髋 套 





header 




















2.1.2 HTML 文档 的 主要 标记 

1. 文字 和 段落 标记 

1) 标题 字体 标记 < hn > 

这 里 的 标题 是 指 HTML 页 面 中 文本 的 标题 ,而 不 是 指 网 页 标题 。 

标题 元 素 有 6 种 ,分 别 为 hl、h2、h3、h4、h5、h6, 用 于 表示 文章 中 的 各 种 题目 。 标 题字 号 
越 小 ,字体 越 大 , 即 hl 是 特大 字体 。 
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例如 : 
<hl > 标题 文字 </hl > 


2) 文字 布局 标记 

将 文档 划分 为 段落 可 以 通过 分 段 标记 换行 标记 、 标 题 标记 或 插 和 人 水平线 来 实现 。 

(1) 分 段 标记 < p >: 分 段 标 记 < p> 和 </p > 定义 了 一 个 段落 ,并 在 段 与 段 之 间 加 一 个 空 
行 ,后 续 行 隔行 显示 。 它 的 常用 属性 是 align, 表 示 对 齐 方式 ,其 取 值 有 right( 右 对 齐 ) \left 
( 左 对 齐 ) justify( 两 端 对 齐 ) center( 居 中 对 齐 ) 。 

(2) 换行 标记 < br >: 换行 标记 < br > 强行 规定 了 当前 行 的 中 断 , 使 后 续 内 容 在 下 一 行 显 
示 ,两 行 间 不 隔行 。 例 如 ,下 面 两 行 HTML 代码 在 浏览 器 中 可 看 到 不 同 的 效果 ,前 者 隔行 
显示 ,后 者 不 隔行 显示 。 




















你 好 吗 ?< p> 很 好 . 
你 好 吗 ?< br > 很 好 . 


(3) DIV 标记 : DIV 标记 用 于 为 文档 分 节 , 以 便 在 文档 的 不 同 部 分 应 用 不 同 的 段落 格 
式 。 单 独 的 DIV 标记 不 能 完成 任何 工作 ,必须 与 align 属性 联合 使 用 。 位 于 DIV 标记 符 中 
的 多 段 文 本 将 被 认为 是 一 个 节 , 可 以 为 它们 设置 一 致 的 对 齐 格式 。 

DIV 标记 的 格式 如 下 : 


< div align = left|center|right > 文本 或 图 像 </div> 

(4) 水 平 线 标记 < hr >: 水 平 线 标记 < hr > 用 于 在 网 页 中 添加 一 条 水 平 线 , 将 不 同 的 信 
息 内 容 分 开 。 其 格式 如 下 : 

< hr align = 对 齐 方式 color = 颜色 size = 粗细 width = 长 度 noshade > 

其 中 ,属性 align 指定 对 齐 方式 ,color 指定 水 平 线 的 颜色 , size 指定 粗细 , width 指定 线 
的 长 度 ,noshade 表示 一 条 无 阴影 的 实 线 , 若 省 略 noshade, 则 显示 带 阴 影 的 三 维 实 线 。 

2. 超 链接 

所 谓 超 链接 (Hyperlink) ,就 是 当 单 击 网 页 上 的 某 些 内 容 时 可 以 打开 另 一 个 网 页 内 容 。 
超 链 接 的 组 织 体现 了 Web 站 点 内 部 或 不 同 站 点 之 间 的 页 面 存储 的 逻辑 关系 。 

超 链接 的 语法 格式 如 下 : 

<a href =URL 地 址 title = 标题 target = 窗口 名 称 > 链接 文本 </a> 


说 明 : href 属性 表示 链接 所 指向 的 URL 地 址 ; title 属性 表示 指向 链接 时 所 显示 的 标 
题 文字 ; target 属性 指定 链接 对 象 的 显示 位 置 , 即 打开 链接 的 目标 窗口 ,默认 是 原 窗 口 。 

针对 链接 对 象 的 地 址 不 同 , 超 链接 可 以 分 为 内 部 链接 、 外 部 链接 和 书签 链接 。 

1) 内 部 链接 

内 部 链接 是 指 链接 到 本 地 计算 机 上 的 文件 。 例 如 : 
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<a href = "1. htm"> 请 单 击 查看 1.htm 中 的 内 容 </a> 














2) 外 部 链接 
外 部 链接 是 指 链接 到 非 本 地 计算 机 上 的 文件 ,可 以 是 其 他 计算 机 或 任意 站 点 上 的 某 个 
文件 。 例 如 : 


<a href = "http://www. xatu. edu. cn/"> 链 接 到 主页 </a> 
<a href = "telnet://bbs.xatu. edu. cn"> 远 程 登录 </a> 


3) 书签 链接 

书签 链接 是 指 链接 到 同一 页 面 中 的 某 个 特定 位 置 。 它 相当 于 在 页 面 的 某 个 地 方 做 上 书 
签 , 需 要 时 通过 书签 链接 可 以 快速 地 找到 该 部 分 。 例 如 : 

在 某 个 页 面 中 使 用 name 属性 定义 一 个 名 为 first 的 书签 。 

<a name = "first"> 第 一 章 </a> 

在 同一 页 面 的 另外 一 个 位 置 使 用 href 属性 指向 它 。 

<a href ="#first"> 指向 第 一 章 </a> 

当 用 户 单 击 超 链接 "指向 第 一 章 " 时 页 面 就 会 跳 转 到 first 书签 所 在 的 位 置 。 注 意 , 在 引 
用 书签 时 要 加 上 "# "号 。 


书签 链接 的 基本 格式 如 下 。 
(1) 在 同一 页 面 中 要 使 用 书签 名 : 


<ahref = "并 书签 名 "> 超 链接 标题 名 称 </a> 
(2) 在 不 同 页 面 之 间 要 使 用 链接 的 URL 地 址 : 


<ahref ="URL 地 址 并 书签 名 "> 超 链接 标题 名 称 </a> 


3. 列表 

列表 (List) 通 常用 于 列举 相关 的 信息 条 目 , 提 供 一 种 有 组 织 的 .易于 浏览 的 阅览 格式 ， 
使 得 文本 的 条 理 更 清晰 。 常 见 的 列表 有 3 种 , 即 无 序列 表 、 有 序列 表 和 定义 列表 。 

1) 无 序列 表 < ul > 

无 序列 表 中 每 一 个 表 项 的 前 面 是 项 目 符号 ,使 用 < ul > 标记 和 < 1i > 表 项 标记 。 其 格式 
如 下 : 














<ul type = 符号 类 型 > 
<1i> 列表 项 1 </1i> 
<1i> 列表 项 2 </1i > 


</ul> 
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<ul > 标记 有 个 type 属性 ,用 于 指定 列表 项 前 面 的 项 目 符号 , 且 必 须 小 写 。 其 取 值 
如 下 : 

。 disc 表示 实心 贺 “@@ "(默认 值 ); 

。 circle 表示 空心 圆 "“ 〇 ”; 

。 square 表示 小 方块 < 国 ”。 

在 同一 个 列表 中 </li > 也 可 以 省 略 , 下 一 个 <1i> 的 出 现 表 明 上 一 个 列表 项 的 结束 。 

2) 有 序列 表 < ol > 

有 序列 表 使 用 标签 < ol > 和 </ol > 表示 , 它 使 内 容 按 顺序 编号 。 每 插入 或 删除 一 个 列表 
项 ,编号 都 会 自动 调整 。 其 格式 如 下 : 
































< ol type = 符号 类 型 start = 起 始 编号 > 
<1i> 列表 项 1 </1i > 
<1i> 列表 项 2 </1i> 


</ol> 


<ol > 标记 有 两 个 属性 , 即 start 属性 和 type 属性 。start 表示 起 始 编号 ,默认 为 1。type 
属性 设置 列表 项 前 面 的 数字 序列 的 样式 ,其 取 值 如 表 2-2 所 示 。 
表 2-2 有 序列 表 的 type 属性 的 取 值 




















取 值 说 明 
type=1 列表 项 用 数字 编号 (1、2、3...) ,默认 值 
type 一 人 列表 项 用 大 写字 母 编号 (A、B.C...) 
type 一 a 列表 项 用 小 写字 母 编号 (a、b、c.…) 
type=I 列表 项 用 大 写 罗马 数字 编号 (T 工 、[T、 作 .…) 
type=i 列表 项 用 小 写 罗马 数字 编号 (i 、ii 、 诈 .…) 
3) 定义 列表 < dl > 
定义 列表 用 于 给 每 一 个 列表 项 加 上 一 段 说 明 性 文字 ,说 明 性 文字 独立 于 列表 项 , 另 起 一 


行 显示 。 定 义 列 表 以 <dl > 和 </dl > 作为 起 止 标 记 , 列 表 项 用 < dt > 引导 ,说明 性 文字 用 < dd > 
引导 。< dt > 与 < dd > 不 需要 结尾 标记 。 其 格式 如 下 
<dl> 


<dt > 第 一 项 <dd> 叙 述 第 一 项 的 定义 
<dt > 第 二 项 <dd> 叙 述 第 二 项 的 定义 


ddl> 

例 2-1 列表 标记 的 使 用 示例 (02-01. html) 。 
<html > 

<head ><title > 列表 标记 示例 </title></head> 


<body> 
<ol type=1> 


人 ASP .NET web 应 用 开发 技术 ( 第 2 版 ) 


<1i><u> 无 序列 表 </u> 
<ul type = circle> 
<1i> Photoshop 
<1i>Illustrator 
<1i> CorelDRAW 
</ul> 
</1i> 
<1i><u> 有 序列 表 </u> 
<ol type=a> 
<1i> Photoshop 
<1i>Illustrator 
<1i> CorelDRAW 
</ol> 
<1i><u> 定 义 列表 </u> 
<dl> 
<dt>Photoshop <dd>Adobe 公司 的 图 像 处 理 软 件 
<dt>Illustrator <dd> hdobe 公司 的 矢量 绘图 软件 
<dt>CorelDRAW < dd > Corel 公司 的 图 形 图 像 软 件 
</dl> 
</ol> 
</body> 
</html > 


上 述 代码 定义 了 一 个 嵌 套 的 列表 。 第 一 级 是 以 数字 为 标号 的 有 序列 表 ,里 人 


了 无 序列 表 、 有 序列 表 和 定义 列表 作为 第 二 级 ,并 使 用 < u > 标记 加 注 了 下 夯 线 。 运 行 结果 
如 图 2-2 所 示 。 











Photoshop 
Adobe 公 司 的 图 像 处 理 软件 
onc 全 司 的 矢 全 续 加 软件 
oCenel 公 司 的 图 形 图 像 软件 

















图 2-2 列表 标记 示例 


4. 表格 


表格 (table) 将 文本 和 图 片 按 行 、 列 编排 有 利于 表达 信息 。 在 早期 的 网 页 布局 中 ,往往 
使 用 table 标记 十 DIV 标记 十 CSS 建立 主页 的 框架 ,使 整个 页 面 更 规则 地 放置 图 片 和 空白 ， 
并 使 条 目 清 晰 。 

表格 的 语法 格式 如 下 : 
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< table align = left| center |right border = n width =x|x% height =yly%> 
<tr> <th> 表 头 1<th> 表 头 2…<th> 表 头 n 
<tr><td> 表 元 1<td> 表 元 2…< td> 表 元 n 


<tr><td> 表 元 1< td> 表 元 2…< td> 表 元 n 
</table> 


1) < table > 标记 
































表格 的 标记 为 < table >, 行 的 标记 为 <tr>, 表 头 的 标记 为 < th >, 表 项 的 标记 为 < td >。 
其 中 ,< tr > 是 单 标 记 , 一 行 的 结束 也 可 以 是 新 行 的 开始 。 参 见 表 2-3。 
表 2-3 表格 标记 
标 签 说 明 
table >...</table 定义 一 个 表格 的 开始 和 结束 
< .</tr> 定义 表 行 ,在 一 组 行 标签 内 可 以 建立 多 组 由 < td > 或 < th> 所 定义 的 单元 格 
< th>...</th> 定义 表 头 , 表 头 中 的 文字 将 以 粗 体 显示 ,< th > 必须 放 在 < tr > 标签 内 
< td>...</td> 定义 表 项 ,一 组 < td > 标签 将 建立 一 个 单元 格 ,< td > 必须 放 在 < tr> 标 签 内 


表格 的 整体 外 观 由 < table > 标记 的 属性 决定 。 在 创建 表格 时 ,可 以 通过 < table > 的 属性 
对 表格 的 格式 进行 设置 。 
2) < caption > 标记 


< caption > 标记 用 来 给 表格 加 标题 ,其 格式 如 下 : 


< caption align = left |right |top| bottom valign = top|bottom > 标题 </caption> 


3) 跨 多 行 ,多 列 的 单元 格 
跨 多 行 .多 列 的 单元 格 使 用 colspan 和 rowspan 属性 进行 定义 。 
(1) 跨 多 列 的 单元 格 : 


<th colspan=n> 表 项 </th> 或 <td colspan= n> 表 项 </td> 


其 中 ,n 表示 合 并 的 列 数 。 
(2) 跨 多 行 的 单元 格 : 


< th rowspan =m> 表 项 </th> 或 <td rowspan=m> 表 项 </td> 


其 中 ,m 表示 合并 的 行 数 。 
例 2-2 跨 多 行 、 多 列 的 单元 格 (02-02. html) 。 


<html> 
<head > < title > 单元 格 跨 多 行 .多 列 </title> </head> 
<body> 
<table align= center border =5> 
<caption ><font size=5><b> 学 生成 绩 表 </b> </font ></caption> 
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<tr><th rowspan = 2> 学 号 <th rowspan = 2 > 姓名 <th colspan = 3 > 成 绩 
<tr><th>C 语 言 设计 <th > 数据 结构 <th > 总 分 数 
<tr><td>0001<td> 张 林 < td>80<td>93<td>173 
<tr><td>0002<td> 刘 亚 玲 <td>90<td>90<td> 180 
<tr><td>0003<td> 赵 丽 <td>72<td>88<td>160 
<tr><td>0004<td> 李 进 <td>85<td>85<td>170 
</table> 
</body> 
</html > 


显示 结果 如 图 2-3 所 示 。 
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图 2-3 跨 多 行 、 多 列 的 单元 格 


5. 表单 


表单 是 实现 服务 器 与 用 户 之 间 交 互信 息 的 主要 方式 。 它 最 直接 的 作用 就 是 从 客户 端 浏 
览 器 收集 信息 ,并 指明 一 个 处 理 信息 的 方法 。 

1) 表单 标记 

表单 是 用 户 和 Web 应 用 程序 进行 交互 的 界面 。 用 户 填 写 完 表单 信息 后 做 提交 表单 的 
操作 ,表单 内 容 就 从 客户 端 传送 给 服务 器 端 ,服务 器 上 的 应 用 程序 处 理 后 将 结果 传送 回 客 
户 端 。 

表单 用 < form > 和 </form > 标记 来 创建 。 甚 语法 格式 如 下 : 












































< form id = "form" action = "处 理 程序 名 "method = "方式 "target = "目标 窗口 "> 
< input type= 井 name= 井 井 value=... /> 


</form > 


说 明 : 
(1) action 属性 : 指定 服务 器 端 处 理 程 序 的 URL 地 址 。 
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(2) method 属性 : 定义 客户 端 提 交 数 据 的 方式 , 取 值 有 GET 和 POST。 
GET 方式 是 将 表单 数据 附加 在 action 指定 的 URL 地 址 之 后 ,并 在 URL 与 数据 之 间 
加 上 一 个 分 隔 符 “?”, 各 数据 项 之 间 用 “&.” 进 行 分 隔 。 例 如 : 


http://www. webs ite. net/example.aspx?txtID = 007&txtName = James 


由 于 浏览 器 地 址 栏 长 度 的 限制 ,GET 方法 一 次 最 多 只 能 提交 256 个 字符 的 数据 。 

POST 方法 与 GET 方法 不 同 , 它 把 表单 数据 作为 一 个 独立 的 数据 块 直接 传递 给 服务 
器 ,传送 的 数据 量 要 比 GET 方式 大 得 多 , 且 不 受 长 度 限 制 。 

(3) target 属性 : 用 来 指定 目标 窗口 。 其 值 有 4 个 , 即 _blank( 空 白 窗口 )、parent( 父 级 
窗口 ) 、self( 当 前 窗口 ) 和 _top( 顶 层 窗口 ) 。 默 认为 当前 窗口 。 

2) 表单 域 标记 

常见 的 表单 域 有 以 下 几 种 。 

(1) 文本 域 : 文本 域 根据 输入 方式 的 不 同 可 分 为 单行 文本 域 .密码 文本 域 和 多 行文 
本 域 。 

。 单行 文本 域 : 输入 文本 以 单行 显示 ,其 类 型 为 type 二 TEXT。 


< input type = TEXT name = 名 称 value = 内 容 maxlength = 最 大 字符 数 size = 宽度 > 


其 中 ,name 表示 文本 域 的 名 称 ,value 表示 默认 值 ,maxlength 表示 最 大 可 输入 字符 数 ， 
size 表示 文本 域 的 宽度 (以 字符 为 单位 )。 
。 密码 文本 域 : 输入 到 文本 域 中 的 文字 均 以 圆 点 的 形式 显示 。 其 方法 如 下 : 


< input type = PASSWORD name = 名 称 maxlength = 最 大 字符 数 size = 宽度 > 


。 多 行文 本 域 : 如 果 输 入 的 文本 较 多 ,可 使 用 < textarea > 和 </textarea > 标记 来 创建 一 
个 能 够 输入 多 行 的 文本 框 。 在 输入 时 如 果 一 行 的 内 容 过 多 或 行 数 过 多 , 则 会 自动 加 
上 水 平和 垂直 滚动 条 。 其 语法 格式 如 下 : 


< textarea name = 名 称 value = 初始 值 rows = 行 数 cols = 列 数 > </textarea> 


(2) 按钮 域 : 使 用 按钮 可 以 提交 表单 或 重 置 表 单 ,按钮 分 为 以 下 3 类 。 
。 提交 按钮 (type 二 submit) ; 单 击 提交 按钮 可 以 实现 表单 内 容 的 提交 。 


< input type = submit name = 名 称 value = "提交 "> 


。 重 置 按钮 (type 一 reset) : 单 击 重 置 按钮 可 以 清除 表单 中 已 经 输入 的 内 容 。 








< input type = reset name = 名 称 value = " 重 置 " > 











。 普通 按钮 (type 一 button) : 使 用 普通 按钮 可 以 通过 调用 函数 完成 其 他 操作 。 





< input type = button name = 名 称 value = 文本 > 
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现 。 


(3) 选择 域 : 选择 域 根据 输入 方式 不 同 分 为 两 类 , 即 单 选 域 和 复 选 域 。 
。 单 选 域 (type 王 radio) 用 来 在 多 个 选项 中 选取 一 项 。 格 式 如 下 : 





< input type = radio name = 名 称 value = 单 选 域 的 取 值 checked> 


其 中 ,checked 表示 默认 选中 的 项 ,value 表示 选中 项 传送 到 服务 器 的 值 。 
。 复 选 域 (type 二 checkbox) 用 于 进行 多 项 选择 。 格 式 如 下 : 


< input type = checkbox name = 名 称 value = 取 值 checked > 
(4) 菜单 和 列表 域 : 假如 在 表单 中 需要 添加 很 多 内 容 , 可 以 使 用 菜单 或 者 列表 域 来 实 
格式 如 下 : 


< select name = 菜单 名 称 size = 选项 个 数 multiple> 
< option value = 选项 值 1 selected> 显示 内 容 1 </option> 
< option value = 选项 值 2> 显示 内 容 2 </option> 


< option value = 选项 值 n> 显示 内 容 n </option> 
</select > 


说 明 : 

。 size 表示 选项 个 数 ,如果 大 于 1, 则 为 选择 列表 ; 如 果 等 于 1, 则 表示 下 拉 菜 单 。 
。 multiple 表示 可 以 复 选 , 即 选择 多 个 选项 。 

。 value 表示 选项 的 值 ,通过 检测 该 菜单 的 value 值 可 以 知道 用 户 选择 了 哪 一 项 。 
。 selected 表示 当前 选项 在 初始 状态 被 选中 。 

6. 多 媒体 标记 


图 像 . 视 频 和 音频 可 以 通过 标记 < figure >、< audio > 和 < video > 来 访问 。 常 用 的 多 媒体 


标记 如 表 2-4 所 示 。 


表 2-4 多 媒体 标记 














标 记 说 明 
figure 定义 一 个 独立 的 流 内 容 , 如 图 片 . 图 表 等 
audio 播放 音频 文件 ,可 以 替代 背景 音乐 
video 播放 一 个 多 媒体 视频 


1) < figure > 标记 
< figure > 标记 定义 媒介 内 容 的 分 组 以 及 它们 的 标题 。 标 记 规 定 独立 的 流 内 容 ( 图 像 、 


图 表 、 照 片 、 代 码 等 ) ,元 素 的 内 容 应 该 与 主 内 容 相关 ,但 如 果 被 删除 , 则 不 应 对 文档 流产 生 影 


响 。 


例如 : 


<figure> 

< img src = "image/chrome.png" alt = "chrome" /> 
< img src = "image/IE.png" alt= "IE" /> 
</figure> 


第 2 章 HTML、XML 与 CSS /5) 


2) < audio > 标记 
<audio > 标记 支持 3 种 格式 的 音频 ,分 别 是 WAV、MP3 和 OGG 格式 。 运 用 audio 标 
记 可 以 完成 对 声音 的 调用 和 播放 ,例如 : 




















<audio src = "song. ogg"” controls = "controls"></audio> 


3) < video > 元 素 

HTML5 提供 的 < video > 元 素 可 以 直接 在 Web 页 面 中 播放 视频 文件 ,但 目前 仅 支持 
OGG .MPEG 4、WebM 几 种 视频 格式 。 

< video > 元 素 包 括 以 下 主要 属性 。 

。 autoplay: 用 来 设 定 视频 是 否 在 页 面 加 载 后 自动 播放 。 

。 src: 指定 要 播放 的 视频 的 URL 地 址 。 

。 controls: 用 来 设置 是 否 为 视频 添加 控制 条 ,例如 “播放 “暂停 ”等 。 

。 poster: 为 视频 设置 一 个 背景 图 片 , 当 视频 无 法 正常 播放 时 可 以 向 用 户 旦 现 。 

。 loop: 用 来 设置 视频 是 否 循 环 播放 。 

例如 : 














<video src = "movie.ogg" controls = "controls"></video> 


人 .2 使 用 XML 表达 数据 
A 

XML 是 Internet 环境 中 跨 平台 的 、 依 赖 于 内 容 的 技术 ,是 当前 处 理 结构 化 文档 信息 的 
有 力 工 具 。 

XML 主要 用 于 表达 数据 , 它 提 供 了 一 种 描述 结构 数据 的 格式 。XML 被 广泛 用 来 作为 
跨 平 台 之 间 交 互 数 据 的 形式 ,主要 针对 数据 的 内 容 , 通 过 不 同 的 格式 化 描述 手段 (XSLT、 
CSS 等 ) 可 以 完成 最 终 的 形式 表达 。 


2.2.1 XML 的 概念 


XML(eXtensible Markup Language, 可 扩展 标识 语言 ) 是 由 万 维 网 联盟 W3C 定义 的 ， 
它 与 HTML 一 样 ,都 是 SGML 的 子 集 。XML 被 设计 用 来 传输 和 存储 数据 , HTML 被 设计 
来 显示 数据 ,XML 在 Web 中 起 到 的 作用 不 亚 于 作为 Web 基石 的 HTML, 但 XML 不 是 
HTML 的 替代 ,而 是 对 HTML 的 补充 。 




















1. SGML.HTML 和 XML 


SGML、HTML 是 XML 的 先驱 。 

SGML(Standard Generalized Markup Language, 标 准 通用 标记 语言 ) 是 一 种 定义 电子 
文档 结构 和 描述 其 内 容 的 国际 标准 语言 ,是 所 有 文档 标记 语言 的 起 源 。SGML 规定 了 在 文 
档 中 嵌入 描述 标记 的 标准 格式 ,指定 了 描述 文档 结构 的 标准 方法 ,HIML 就 是 使 用 固定 标 
签 集 的 一 种 SGML 文档 。SGML 早 于 Web 的 诞生 ,虽然 它 定义 文档 的 功能 强大 ,但 由 于 标 
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准 过 严 .过 于 复杂 ,使 得 SGML 直接 应 用 于 Web 的 难度 非常 大 ,不 适 于 Web 数据 描述 。 

HTML 是 在 SGML 基础 上 开发 出 来 的 应 用 于 Web 的 语言 。 由 于 它 简 单 易 用 、 使 用 成 
本 低 ,很 快 成 为 Web 的 通用 语言 。 随 着 Web 的 应 用 越 来 越 深入 , 人们 渐渐 觉得 HTML 不 
够 用 了 ,过 于 简单 的 语法 阻碍 了 它 表达 复杂 的 形式 ,有 限 的 标记 也 严重 制约 着 Web 上 的 数 
据 交 换 。HTML 不 能 表现 深层 的 信息 结构 ,不 适 于 大 量 文档 的 存储 。HTML 需要 下 载 整 
份 文件 才能 开始 对 文件 做 搜寻 的 动作 。HTML 的 扩充 性 、 弹 性 、 易 读 性 均 不 佳 。 

为 了 解决 以 上 问题 ,专家 们 使 用 SGML 精简 制作 ,并 依照 HTML 的 发 展 经 验 ,产生 出 
一 套 规则 严 说、 使 用 简单 的 描述 数据 语言 一 -XML。 

XML 结合 了 SGML 和 HTML 的 优点 并 消除 其 缺点 。XML 是 SGML 的 子 集 , 它 继承 
了 SGML 的 大 多 数 功能 ,并 进行 了 机 能 的 扩张 。XML 继承 了 SGML 的 延展 性 、 文 件 自我 
描述 特性 以 及 强大 的 文件 结构 化 功能 , 按 除 了 SGML 过 于 庞大 复杂 以 及 不 易 普 及 化 的 缺 
点 。 可 以 说 ,XML 以 SGML 之 20% 的 难度 实现 了 SGML 之 80% 的 机 能 ,成 为 下 一 代 Web 
运用 的 数据 传输 和 交互 的 重要 工具 。 


2. XML 的 树 结构 
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XML 是 一 种 元 标记 语言 。 所 谓 “ 元 标记 ”, 就 是 XML 不 像 HTML 那样 只 能 使 用 规定 
的 标记 ,用 户 可 以 自己 定义 需要 的 标记 。 任 何 满足 XML 命名 规则 的 名 称 都 可 以 作为 标记 ， 
这 就 为 不 同 的 应 用 程序 打开 了 大 门 。 

XML 文档 是 纯 文本 ,可 以 用 文本 编辑 器 创建 。XML 文档 的 扩展 名 为 *. xml”。 

下 面 来 看 一 个 简单 的 XML 文档 。 

例 2-3 一 个 XML 文档 (bookstore. xml) 。 


<?xml version = "1.0" encoding=" ISO0— 8859 - 1"?> 
<bookstore > 
<book category = "COOKING"> 
<title lang = "en"> Everyday Italian </title> 
<author > Giada De Laurentiis </author> 
<year > 2005 </year > 
<price> 30,00</price> 
</book > 
<book category = "CHILDREN"> 
<title lang = "en"> Harry Potter </title> 
<author >J K. Rowling </author > 
<year > 2005 </year > 
<price>29.99 </price> 
</book > 
< book category = "WEB"> 
<title lang = "en"> Learning XML </title> 
<author > Erik T. Ray </author > 
<year > 2003 </year > 
<price> 39.95 </price> 
</book > 
</bookstore > 
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每 个 XML 文档 都 由 第 1 行 的 XML 声明 开始 , 它 定义 了 XML 的 版 本 和 所 使 用 的 编 
码 。 第 2 行 是 文档 的 根 元 素 < bookstore >, 根 元 素 的 子 元 素 是 < book > 元 素 。< book > 元 素 
有 4 个 子 元 素 , 即 < title >、< author >、< year > 和 < price >, 同 时 < book > 元 素 还 有 属性 
category。 
整个 XML 文档 组 成 一 个 树 形 结构 。 也 就 是 说 ,XML 文档 必须 包含 根 元 素 ,该 元 素 是 
所 有 其 他 元 素 的 父 元 素 。XML 文档 中 的 所 有 元 素 形成 一 棵 文档 树 。 这 棵 树 从 根部 开始 ， 







































































一 直 扩展 到 树 的 最 底 端 。 所 有 元 素 均 可 拥有 子 元 素 , 也 都 可 拥有 文本 内 容 和 属性 。 

图 2-4 所 示 为 一 棵 XML 文档 树 。 它 包括 4 类 结 点 , 即 根 结 点 、 元 素 结 点 、 属 性 结 点 和 文 
本 结 点 。 根 结 点 表示 的 是 根 元 素 ,元 素 结 点 用 于 表示 根 元 素 的 所 有 子 元 素 ,属性 结 点 用 于 表 
示 元 素 的 属性 ,文本 结 点 表示 元 素 的 文本 内 容 。 





<bookstore> 











: 属性 : 
<book> “category” 


元 素 : 元 素 : 元 素 : 元 素 : 
<title> <author> <year> <price> 
ne 
同 级 


文本 : 文本 : 文本 : 文本 : 
Harry Potter J K. Rowlin' 2005 29.99 


图 2-4 XML 文档 树 


























3. XML 与 HTML 的 不 同 


XML 和 HTML 都 来 自 于 SGML ,它们 有 着 相似 的 语法 ,但 却 有 着 很 大 的 不 同 。 传 统 
的 HHTML 无 法 表达 数据 的 含义 ,而 这 恰恰 是 电子 商务 、 智 能 搜索 所 必须 的 。HTML 不 能 描 
述 化 学 符号 .数学 公式 .音乐 符号 矢量 图 形 .影音 文件 等 内 容 。HTML 的 可 扩展 性 差 , 不 像 
XML 那样 可 以 提供 更 多 的 数据 操作 。 

XML 与 HTML 相 比 有 以 下 不 同 : 

1) XML 实现 内 容 与 形式 的 分 离 

HTML 中 的 数据 和 表现 形式 是 混合 在 一 起 的 , 当 改变 内 容 数据 的 表现 形式 时 需要 更 新 
整个 文档 。XML 文档 只 包含 数据 ,数据 的 表现 形式 由 另 一 个 描述 格式 的 文档 来 定义 ,因此 
只 要 改变 该 格式 文档 即 可 。 

2) XML 扩展 性 比 HTML 强 

XML 允许 使 用 者 创建 个 性 化 的 标签 ,每 一 个 行业 或 专业 领域 可 以 制定 特定 范围 内 的 
标签 集 ,以 满足 特殊 的 需要 。XML 的 扩展 性 和 灵活 性 允许 它 描述 不 同 种 类 应 用 软件 中 的 
数据 ,从 描述 搜集 的 Web 页 到 数据 记录 。XML 格式 的 数据 发 送 给 客户 后 ,客户 可 以 用 应 用 
软件 解析 数据 ,并 对 数据 进行 编辑 和 处 理 。 使 用 者 可 以 用 不 同 的 方法 处 理 数据 ,而 不 仅仅 是 
显示 它 。HTML 只 能 局 限于 按 一 定 的 格式 在 终端 显示 出 来 。 
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3) XML 的 语法 比 HTML 严格 
于 XML 的 扩展 性 强 , 它 需要 稳定 的 基础 规则 来 支持 扩展 ,如 起 始 标签 和 结束 标签 必 
须 匹 配 、 标 签 不 能 交 又 幅 套 、 区 分 大 小 写 等 。HTML 并 没有 规定 标签 的 绝对 位 置 , 也 不 区 分 
大 小 写 ,这 些 全 部 由 浏览 器 来 识别 和 更 正 。 
) XML 具有 良好 的 自 描述 性 
HTML 使 用 固有 的 标签 来 描述 和 显示 网 页 内 容 。XML 不 能 描述 网 页 的 外 观 和 内 容 ， 
只 是 描述 内 容 的 数据 形式 和 结构 。XML 标签 拥有 特定 的 语义 ,更 容易 被 人 理解 。 同 时 
于 XML 数据 是 自我 描述 的 ,数据 不 需要 有 内 部 描述 就 能 被 交换 和 处 理 。 


















































2.2.2 XML 的 语法 规则 
1. XML 文档 的 格式 


前 面 说 过 ,XML 比 HTML 在 语法 上 有 着 更 严格 的 要 求 。 一 个 结构 良好 的 XML 文档 
必须 满足 以 下 条 件 : 

。 XML 文档 由 “XML 声明 ”开始 ; 

。 有 且 仅 有 一 个 根 元 素 ; 

。 所 有 的 XML 标记 必须 成 对 出 现 , 将 数据 包围 在 中 间 ; 

。 所 有 的 XML 标记 必须 正确 嵌 套 ; 

。 XML 标记 对 大 小 写 敏 感 。 

所 谓 “ 结 构 良 好 ”是 针对 HTML 混乱 的 语法 而 言 的 ,XML 文档 只 有 格式 良好 才能 被 正 
确 地 分 析 和 和 处理。 下面 是 一 个 合理 的 HTML 文档 ,但 却 完 全 不 符合 XML 的 格式 要 求 。 


<html > 

<body> 

<h2 > 西安 欢迎 你 < br > 

<font color = "red" size = 4> 西 安 欢 迎 你 </font > 
<hr> 

<b size=6><i> 西 安 欢迎 你 </b></i> 

</body > 

</html > 


还 有 一 点 要 说 明 的 是 ,XML 中 的 空格 不 会 被 删除 ,而 是 被 保留 。HTML 则 会 把 多 个 连 
续 的 空格 字符 合并 为 一 个 。 在 XML 文档 中 任何 的 差错 都 会 得 到 同一 个 结果 一 一 网 页 不 能 
2. XML 标记 的 命名 规则 


。 名 字 中 可 以 包含 字母 .数字 以 及 其 他 字母 ; 

。 名 字 不 能 以 数字 或 ””( 下 画 线 ) 开 头 ; 

。 名 字 不 能 以 字母 xml (或 XML Xml 等 ) 开 头 ; 
。 名 字 中 不 能 包含 空格 。 
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XML 声明 的 作用 是 告诉 浏览 器 将 要 处 理 的 文档 是 XML 文件 。 例 如 : 


3. XML 声明 


<?xml version = "1.0" encoding = "gb2312" ?> 








其 中 ,version 属性 指明 文档 遵循 哪个 版 本 的 XML 规范 ; encoding 属性 指明 文档 中 字 
符 使 用 的 编码 标准 ,常见 的 有 GB2312、BIG5、UTF-8 等 。 


2.2.3 XML 文档 的 显示 


原始 的 XML 文档 可 以 用 浏览 器 查看 ,浏览 器 将 其 显示 为 一 棵 可 折合 的 树 。 这 里 仍 以 
person. xml 为 例 ,用 下 浏览 器 打开 的 结果 如 图 2-5 
所 示 。 

XML 文档 本 身 并 不 包含 数据 显示 的 信息 ,如 
果 希 望 XML 文档 在 浏览 器 中 按照 一 定 的 格式 显 
示 出 来 ， 0 个 专门 的 文件 来 定制 XML 文 
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<?xml version="1.0" ?> 
- <person> 





档 的 显示 样式 。 这 个 专门 的 样式 文档 通常 是 CSS Tame>ceorge /name> 
( 层 登 样式 表 ) 。 i rad 或 多 ge>28 /age> 


</person> 
个 格式 化 规则 的 文档 ,包含 指示 Web 浏览 器 如 何 ”| 
将 原文 档 的 结构 翻译 为 一 个 能 够 显示 的 结构 的 
代码 。 图 2-5 在 浏览 器 中 打开 原始 的 XML 文档 
CSS(Cascading Style Sheets, 层 释 样 式 表 ) 包 
含 一 个 或 多 个 格式 化 规则 和 定义 。 它 控制 XML 或 HTML 文档 中 的 标签 在 浏览 器 中 如 何 
显示 。 
假设 创建 一 个 CSS 文档 person. css, 其 内 容 如 下 : 


person { 
font— size: 24px; 
font — weight: bold; 
display: block; 
color: blue; 
} 
sex{ 
font— size: 20px; 
font— style: italic; 
text — decoration: underline 


; 


上 面 定义 了 XML 文档 person. xml 中 的 根 元 素 person、 子 元 素 sex 的 显示 特性 。 

如 果 要 按照 person. css 中 的 定义 显示 XML 文档 person. xml 的 内 容 , 需 要 在 XML 文 
档 中 添加 一 条 xml-stylesheet 命令 ,这 样 此 XML 文档 就 与 CSS 文件 关联 起 来 了 。 

下 面 是 修改 后 的 person. xml 文档 (person-css. xml) : 
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<?xml version = "1.0"?> 
<?xml — stylesheet type = "text/css" href = "person.css" ?> 
<person > 
<to > George </to> 
<sex>Man</sex> 
<age>28 </age> 
</person> 


在 浏览 器 中 打开 该 文档 ,显示 的 结果 如 图 2-6 所 示 。 


http:/ /localhost /person_csswml” = [I= ES 


OOM | 











图 2-6 用 CSS 显示 XML 数据 


@.3 使 用 CSS 表达 页 面 样式 


CSS(Cascading Style Sheet, 层 县 样式 表 或 级 联 样 式 表 ) 可 以 定义 HTML 文档 在 浏览 
器 中 显示 的 样式 。 

CSS 是 一 种 标记 性 语言 , 它 用 于 控制 网 页 样式 ,并 允许 将 网 页 内 容 与 显示 样式 分 离 ,为 
网 页 里 的 元 素 创 建 在 浏览 器 中 的 表现 样式 。CSS 以 HTML 语言 为 基础 ,提供 了 丰富 的 格 
式 化 功能 ,如 字体 .颜色 .背景 和 整体 排版 等 。 


2.3.1 在 HTML 中 使 用 CSS 
首先 来 看 一 个 普通 的 HTML 页 面 (welcome. htmy) 


<!doctype htm] > 

<html xmlns = "http://www. w3. org/1999/xhtml"> 
<head> 

<meta charset = "utf - 8" /> </head> 

<body> 

<hl > 欢迎 你 到 西安 来 !</hl > 

<h3 > 欢迎 你 常 到 西安 来 !4</h3 > 

</body > 

</html > 








属性 


当 
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浏览 器 打开 这 个 网 页 时 ,浏览 器 将 以 默认 的 样式 显示 其 内 容 , 如 图 2-7 所 示 。 














修改 上 述 页 面 内 容 ,加 入 CSS 代码 ,如 下 所 示 (welcome_css. htmy) : 


<!doctype html > 

<html xmlns = "http://www. w3. org/1999/xhtml"> 
<head > 

<meta charset= "utf - 8" /> 

< style type = "text/css"> 


hl {font - style:italic;color: red;display:inline; } 


</style> 

</head> 

<body> 

<hl > 欢迎 你 到 西安 来 !</hl > 

< h3 style = "color:blacki font - weight:200"> 欢 迎 你 常 到 西安 来 !!</h3 > 
</body> 

</html > 


在 浏览 器 中 打开 welcome_css. htm, 显示 结果 如 图 2-8 所 示 。 可 以 看 出 ,原来 代码 中 的 
<hl ><h3 > 标记 在 加 了 CSS 样式 说 明 以 后 显示 的 效果 明显 不 同 了 。 


欢迎 你 到 西安 来 ! 
欢迎 你 常 到 西安 来 ! ! 












p: localhost/ welcome htmm 


[es | SG 








rT lolx 


ee 






必 训 入 到 西安 羔 ! 


欢迎 你 常 到 西安 来 ! ! 






图 2-7 浏览 器 默认 显示 的 HTML 网 页 图 2-8 按 指定 CSS 样式 显示 的 HTML 网 页 


概括 起 来 ,在 HTML 文档 中 使 用 CSS 样式 表 主 要 分 为 3 种 方式 , 即 内 嵌 样 式 (Inline 
Style) .内 部 样式 表 (Internal Style Sheet) 、 外 部 样式 表 (External Style Sheet) ,下 面 分 别 对 
这 几 种 方式 加 以 说 明 。 


1. 内 榜样 式 
内 组 样式 (Inline Style) 是 指 对 < body > 和 </body > 之 间 的 HTML 标签 直接 设置 style 











为 CSS 代码 。 它 只 对 所 在 的 HTML 标签 有 效 。 其 格式 如 下 : 





< 标签 名 style= "CSS 代码 "> </ 标 签名 > 


例如 : 


<html> 


<body> 
<h3 style= "color:black;font - weight:200"> 西 安 欢迎 你 </h3 > 
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<p style = "font - size:20pt; color:red"> 西 安 欢迎 你 </p> 
</body> 
</html > 


2. 内 部 样式 表 


内 部 样式 表 (Internal Style Sheet) 是 指 在 HTML 文档 的 头 部 (< head ></head > 标签 对 
之 间 ) 定 义 一 对 < style ></style > 标签 。 它 只 对 当前 所 在 的 网 页 有 效 。 其 格式 如 下 : 

















< style type = "text/css"> CSS 代码 </style> 


例如 : 


<head> 
<style type = "text/css" media = "screen, projection"> 
p { font - size:20pt; color:blue; font- family: 宋 体 ; list - style- type:circle; } 
</style> 
</head > 


3. 外 部 样式 表 


当 多 个 HTML 网 页 使 用 同样 的 CSS 规则 时 ,可 以 将 这 些 CSS 规则 放 在 一 个 以 . css 为 
扩展 名 的 独立 文件 中 ,然后 在 网 页 里 使 用 < link > 引用 这 个 CSS 文件 。 其 格式 如 下 : 





< link type = "text/css" rel = " stylesheet"” href = " CSS 文件 的 URL" /> 


属性 rel 是 “relation” 的 缩写 ,表示 HTML 文件 与 所 链接 对 象 之 间 的 关系 ; 属性 href 可 
以 是 一 个 完整 的 URL ,指定 CSS 文件 的 位 置 。 
例如 : 


<html> 
<head> 
<link href ="../css_tutorials/home.css" rel = "stylesheet" type = "text/css"> 
</head> 
<body> 
<hl class = "mylayout"> 这 个 标题 使 用 了 Style </hl > 
<hl > 这 个 标题 没有 使 用 Style </hl > 
</body > 
</html > 


将 HTML 页 面 本 身 和 CSS 样式 分 离 为 不 同 的 文件 ,实现 了 页 面 框架 代码 和 页 面 布局 
CSS 代码 的 完全 分 离 ,使 得 网 页 的 前 期 制作 和 后 台 维 护 都 非常 方便 。 

使 用 外 部 样式 表 相对 于 内 骨 样 式 和 内 部 样式 表 有 以 下 优点 。 

(1) 样式 代码 可 以 复 用 : 一 个 外 部 CSS 文件 可 以 被 很 多 网 页 共用 。 

(2) 便于 修改 : 如 果 要 修改 样式 ,只 需要 修改 CSS 文件 ,而 不 需要 修改 每 个 网 页 。 
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(3) 提高 网 页 显示 的 速度 : 如 果 样式 写 在 网 页 里 ,会 降低 网 页 显示 的 速度 ,如 果 网 页 引 
个 CSS 文件 ,这 个 CSS 文 件 多半 已 经 在 缓存 区 (其 他 网 页 早已 引用 过 ) ,网 页 显示 的 束 
度 就 比较 快 。 



































4. 样式 表 的 优先 级 顺序 


样式 表 允 许 以 多 种 方式 规定 样式 信息 。 样 式 可 以 规定 在 单个 的 HTML 元 素 中 ,在 
HTML 页 的 头 元 素 中 或 在 一 个 外 部 CSS 文件 里 。 

当 同 一 个 HTML 元 素 被 不 止 一 个 样式 定义 时 会 使 用 哪个 样式 ? 

一 般 而 言 ,所 有 的 样式 会 根据 下 面 的 规则 层 释 于 一 个 新 的 虚拟 样式 表 中 : 

(1) 浏览 器 默认 (Browser Default) : 优先 级 最 低 。 

(2) 外 部 样式 表 (External Style Sheet) 。 

(3) 内 部 样式 表 (Internal Style Sheet, 位 于 < head > 标签 内 部 ) 。 

(4) 内 髓 样式 (Inline Style, 在 HTML 元 素 内 部 ): 优先 级 最 高 。 

内 艇 样式 拥有 最 高 的 优先 权 ,样式 的 优先 级 依次 是 内 骨 .内 部 .外 部 浏览 器 默认 。 

假设 内 嵌 样 式 中 有 font-size:30pt, 而 内 部 样式 中 有 fontrsize:12pt, 那 么 内 嵌 样 式 就 会 
覆盖 内 部 样式 。 例 如 : 























<html > 
<head > 
<title> cascading order </title> 
< style type = "text/css"> p {font - size:12pt}</style> 
</head> 
<body > 


<p style= "font - size:30pt"> 西 安 欢迎 你 !</p> 
</body> 
</html > 


在 上 述 代码 中 段落 标记 < p > 的 内 嵌 样 式 覆 盖 了 内 部 样式 表 , 因 此 显示 的 字体 大 小 是 
30pt, 而 不 是 12pt。 


2.3.2 CSS 样式 规则 
1. 样式 规则 的 基本 结构 


一 个 样式 (Style) 的 基本 结构 由 3 个 部 分 组 成 , 即 选择 器 (Selector)、 属 性 (Property)、 属 
性 值 (Value)。 其 格式 如 下 : 


selector { property: value; property: value; …} 


。 selector: 当 定 义 一 条 样式 规则 时 必须 指定 这 条 规则 作用 的 HTML 元 素 。 
。 property: 指定 要 被 修改 的 样式 风格 的 名 称 , 即 CSS 属性 。 

。 value: property 属性 的 值 。 

例如 : 
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p {color:blue} 


在 这 里 p 就 是 选择 器 ,color 就 是 属性 ,blue 就 是 属性 值 。 

在 HTML 中 所 有 的 标签 都 可 以 作为 选择 器 。 如 果 想 为 Style 添加 多 个 属性 ,在 两 个 属 
性 之 间 要 用 分 号 加 以 分 隔 。 

例如 : 





























p { text—align:center; color:red } 


为 了 提高 Style 代码 的 可 读 性 ,也 可 以 分 行 写 : 


pl{ 
text — align: center; 
color: red 


} 


当 多 个 选择 器 有 相同 的 属性 和 属性 值 时 ,可 以 将 多 个 选择 器 用 逗号 分 隔 。 下 面 的 例子 
是 将 所 有 正文 标题 (< hl > 到 < h6 >) 的 字体 的 颜色 都 变 成 蓝 色 。 


hl, h2, h3, h4,h5,h6 { 
text ~ align: center; 
color: blue 


} 


为 了 方便 用 户 理解 CSS 代码 ,还 可 以 添加 CSS 代码 注释 。CSS 代码 注释 以 “/ x ”开头 、 
以 “* /” 结 束 。 例 如 : 


pt 
text — align: center; 
/x 居中 显示 */ 


color: black; 
font— family: arial 


2. 样式 规则 的 继承 


样式 规则 的 继承 是 指 媒 套 的 HTML 子 元 素 会 继承 外 层 的 父 元 素 所 设置 的 样式 规则 。 
例如 有 这 样 的 CSS 规则 : 


<style type = "text/css"> 

body { font - family: Verdana，sans - serif; } 

p { font— family: Times, "Times New Roman", serif; } 
</style> 





根据 上 面 的 第 一 条 规则 ,页 面 中 < body > 元 素 内 的 所 有 子 元 素 将 使 用 Verdana 字体 ( 假 
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如 系统 中 存在 该 字体 ) ,也 就 是 说 这 些 子 元 素 将 继承 父 元 素 < body > 所 拥有 的 一 切 属性 ( 子 元 
素 诸如 p、td、ul、ol\li,dl、dt 和 dd 等 ), 子 元 素 的 子 元 素 也 一 样 。 但 是 ,假如 希望 段落 的 字体 是 


Times, 那 么 就 创建 一 个 针对 p 的 特殊 规则 ( 即 第 二 条 规则 ) ,这 样 它 就 会 摆脱 父 元 素 的 规则 。 
2.3.3 CSS 选择 器 











HTML 页 面 中 的 标记 都 是 通过 不 同 的 CSS 选择 器 去 控制 的 。 每 条 CSS 规则 至 少 包含 
一 个 选择 器 。 常 用 的 CSS 选择 器 主要 包括 HTML 标签 选择 器 (HTML selector) 、 类 选择 
器 (Class selector) ID 选择 器 (ID selector) 、 伪 类 选择 器 (Pseudo-classes selector) ,派生 选 
择 器 (Contextual selector) 。 

一 般 而 言 ,CSS 选择 器 越 特 殊 , 它 的 优先 级 越 高 ,也 就 是 选择 器 的 指向 越 准确 , 它 的 优先 级 
就 越 高 。 因 此 ,选择 器 的 优先 级 通常 是 派生 选择 器 > ID 选择 器 > 类 选择 器 > HTML 标签 选 














下 面 分 别 介绍 这 几 种 选择 器 。 


1. HTML 标签 选择 器 (HTML selector) 


一 个 HTML 页 面 由 很 多 不 同 的 标签 组 成 ,标签 选择 器 直接 声明 哪些 标签 采用 哪 种 
CSS 样式 。 格 式 如 下 : 


标签 名 { 属性 :属性 值 ; 属性 :属性 值 ; … } 


例如 : 


hl {color:red; font ~ size:15pt } 
hl, h2, h3, h4 {color:red } 


2. 类 选择 器 (Class selector) 


在 同一 个 HTML 文档 中 , 当 同 一 标签 需要 使 用 不 同 的 样式 或 同一 样式 被 不 同 标签 使 
用 时 需要 用 到 类 选择 器 。 例 如 , 当 显 示 论 文 的 摘要 和 正文 时 需要 用 到 不 同 的 字体 ,但 两 者 可 
能 都 使 用 了 < p > 标签 ,如果 仅 使 用 简单 的 标签 选择 器 , 则 无 法 区 别 对 待 不 同 部 分 的 段落 样 
式 , 而 类 选择 器 很 好 地 解决 了 这 个 问题 。 

(1) 定义 Class selector 的 格式 如 下 : 

















标签 名 .类 名 { 属性 :属性 值 ; 属性 :属性 值 ; … } 


或 


类 名 { 属性 :属性 值 ; 属性 :属性 值 ; … } 


(2) 引 




















Class selector 的 格式 如 下 : 


< 标签 名 class = "类 名 "> 


(2\ ASP .NET Web 应 用 开发 技术 ( 第 2 版 ) 


下 面 对 两 种 不 同 的 使 用 情况 分 别 举例 (注意 : 类 名 是 可 以 任意 定义 的 )。 
1) 同一 标签 需要 使 用 不 同 的 样式 
比如 段落 <p > 有 两 种 样式 ,一 种 是 居中 对 齐 ,一 种 是 居 右 对 齐 。 定 义 样式 如 下 : 





p.center {text — align:center} 
p.right {text — align:right} 





其 中 ,right 和 center 就 是 两 个 Class。 引 用 这 两 个 Class 的 示例 代码 如 下 : 
<p class = "center"> 这 一 段 居 中 显示 </p> 
<p class = "right"> 这 一 段 是 居 右 显示 </p> 


2) 同一 样式 被 不 同 标签 使 用 
比如 直接 用 *. "加 上 类 名 作为 一 个 选择 器 。 代 码 如 下 : 


, center {text 一 align: center} 
这 种 通用 的 Class selector 没有 HTML 标签 的 限制 ,可 以 用 于 不 同 的 标签 。 


<hl class = "center"> 这 个 标题 居中 显示 </hl > 
<p class = "center"> 这 个 段落 居中 显示 </p> 


3. ID 选择 器 (ID selector) 


ID 选择 器 可 以 为 标 有 特定 id 的 HTML 元 素 指定 特定 的 样式 。 在 同一 个 HTML 页 面 
中 id 是 唯一 的 ,只 能 定义 一 次 。 如 果 多 次 使 用 同一 个 id 名 称 会 导致 与 其 他 要 求 唯一 id 的 
应 用 程序 发 生 冲突 。 因 此 与 类 选择 器 不 同 , 在 一 个 HTML 文档 中 ID 选择 器 会 使 用 一 次 ， 
而 且 仅 使 用 一 次 。 

如 果 要 定义 一 个 ID 选择 器 ,需要 在 id 名 称 前 加 一 个 “# ”号 。 


(1) 定义 id 的 格式 如 下 : 
总 名 { 属性 :属性 值 ; 属性 :属性 值 ; …} 





(2) 引用 id 的 格式 如 下 : 
< 标签 名 id= "ID 名 "> 


例如 : 


<style type = "text/css"> 
a 
# red {color: red} 
#blue {color: blue} 
Cr 
</style> 
<p id= "red"> 这 个 段落 是 红色 </p> 
<p id= "blue"> 这 个 段落 是 蓝 色 </p> 
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有 一 些 特殊 的 HTML 元 素 可 以 拥有 不 同 的 状态 。 例 如 ,用 于 定义 超 链接 的 < a > 标签 
就 可 以 处 于 “未 被 访问 交 已 被 访问 过 光 鼠 标 悬 浮 其 上 ”等 几 种 状态 。 

对 于 这 种 元 素 ,CSS 使 用 伪 类 选择 器 为 其 不 同 的 状态 定义 样式 。 

伪 类 选择 器 的 格式 如 下 : 


4. 伪 类 选择 器 (Pseudo-classes selector) 























HTML 元 素 : 伪 类 名 { 属性 :属性 值 ; 属性 :属性 值 ; … } 


常用 的 伪 类 如 下 。 

。 a:link: 超 链接 的 正常 状态 (没有 任何 动作 前 )。 
。 a:visited; 访问 过 的 超 链接 状态 。 

:hover: 光标 移动 到 超 链 接 上 的 状态 。 
:active: 选中 超 链接 时 的 状态 。 

。 p:first-line: 段落 中 的 第 一 行文 本 。 

。 p:first-letter: 段落 中 的 第 一 个 字母 。 

例如 : 


. 
~ 


. 
所 


< style type = "text/css"> 

a:link {color: #FF0000} /x 未 被 访问 的 链接 ,红色 x*/ 
a:visited {color: #00FF00} /x 已 被 访问 过 的 链接 ,绿色 */ 
a:hover {color: 井 FFCC00} /* 鼠标 悬浮 在 其 上 的 链接 ,橙色 */ 
a:active {color: #0000FF} /* 鼠标 点 中 激活 链接 , 蓝 色 */ 
</style> 


此 外 还 有 一 种 方式 ,就 是 伪 类 可 以 与 CSS 类 配合 使 用 。 其 格式 如 下 
HTML 元 素 . 类 名 : 伪 类 名 { 属性 :属性 值 ; 属性 :属性 值 ; … } 


例如 ， 


<style type = "text/css"> 

a.cl:link {color: #FF0000} /x 未 被 访问 的 链接 ,红色 */ 
a.cl:visited {color: 井 00FF00} /x 已 被 访问 过 的 链接 ,绿色 x*/ 
a.cl:hover {color: #FFCC00} /x 鼠标 悬浮 在 其 上 的 链接 ,橙色 * / 
a.cl:active {color: 井 0000FF} /x 鼠标 点 中 激活 链接 , 蓝 色 * / 
</style> 


注意 : 由 于 CSS 优先 级 的 关系 (后 面 比 前 面 的 优先 级 高 ), 用 户 在 写 <a > 的 CSS 时 一 定 
要 按照 a:link、a:visited、a:hover、a:actived 的 顺序 书写 。 


5. 派生 选择 器 (Contextual selector) 














派生 选择 器 允许 用 户 根 据 文档 的 上 下 文 关 系 来 确定 某 个 标签 的 样式 。 通 过 合理 地 使 
派生 选择 器 可 以 使 HTML 代码 变 得 更 加 整洁 (有 的 资料 也 叫 上 下 文选 择 器 、 关 联 选择 器 、 








(Ce ASP .NET Web 应 用 开发 技术 (第 2 版 ) 


后 代 选 择 器 .父子 选择 器 ,等 等 ) 。 
如 果 想 对 特定 HTML 元 素 的 子 元 素 设 定 样式 ,可 以 使 用 派生 选择 器 。 格 式 如 下 : 














父 元 素 子 元 素 
{ 属性 :属性 值 ; 属性 :属性 值 ; … } 


说 明 : 父 元 素 和 子 元 素 之 间 用 空格 隔 开 ,其 至 子 元 素 后 面 还 可 以 有 和 孙子 元 素 。 它 们 从 
左 往 右 依 次 细 化 ,最 后 锁定 要 控制 的 元 素 标签 。 
例如 : 


<html> 
<head> 
<title> Class Selector </title> 
< style type = "text/css"> p em {color:red}</style> 
</head> 
<body> 
<p > 段落 中 用 em 强调 的 字 是 <em > 红色 </em> 的 </p> 
<h3 > 标题 中 用 en 强调 的 字 < em > 不 是 红色 </em> 的 </h3> 
</body > 
</html > 


在 上 述 代 码 中 为 能 入 < p > 元 素 中 的 子 元 素 < em > 定义 了 样式 *p em{color: red)”。 

在 这 里 p em 就 叫 Contextual Selector ,表示 在 < p > 里面 定义 了 一 个 用 em 标记 的 样式 ， 
即 {color: red}。 因 此 ,只 有 在 < p > 里 面 用 < em ></em > 标记 的 字体 才 是 红色 ,而 <h3 > 中 用 
<em ></em > 标记 的 字 不 是 红色 。 

再 看 下 面 的 CSS 规则 : 








< style type = "text/css"> 
strong { color: red; } 
h2 { color: red; } 
h2 strong { color: blue; } 
</style> 


下 面 是 它 施加 影响 的 HTML 语句 : 


<body> 
<p>The strongly emphasized word in this paragraph is < strong> red </strong>.</p> 
<h2 > This subhead is also red.</h2 > 
<h2 > The strongly emphasized word in this subhead is < strong > blue </strong>.</h2 > 
</body> 


2.3.4 常见 的 样式 属性 


常见 的 样式 属性 包括 字体 、 文 本 、 背 景 .边框 、 边 距 、 列 表 样 式 、 定 位 属性 等 ,下 面 对 这 些 
属性 进行 简要 介绍 。 
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1. 字体 属性 


CSS 的 字体 属性 定义 文本 的 字体 、 大 小 、 加 粗 、 风 格 ( 如 斜体 ) 等 ,如 表 2-5 所 示 。 
表 2-5 CSS 的 字体 属性 

















属 性 描 述 
font 可 设置 字体 的 所 有 属性 
font-family 设置 字体 系列 
font-size 设置 字体 的 尺寸 
font-style 设置 字体 的 风格 , 取 值 为 normalitalic、oblique 





字体 变 体 , 取 值 为 normal、small-caps 


font-variant 





设置 字体 的 粗细 ,默认 为 normal 


font-weight 





2. 文本 属性 
CSS 的 文本 属性 可 以 定义 文本 的 外 观 。 用 户 通过 文本 属性 可 以 改变 文本 的 颜色 .字符 
间距 ,以 及 对 齐 文本 、 装 饰 文本 、 对 文本 进行 缩 进 等 ,如 表 2-6 所 示 。 
表 2-6 CSS 的 文本 属性 


























属 性 描 述 
color 设置 文本 的 颜色 
direction 设置 文本 的 方向 
line-height 设置 行 高 
text-indent 文本 首 行 缩 进 
text-decoration 设 定 文本 下 夯 线 
text-align 文本 对 齐 
vertical-align 文本 的 垂直 对 齐 方式 


3. 背景 属性 


CSS 既 允 许 使 用 纯色 作为 背景 ,也 允许 使 用 背景 图 像 创 建 复杂 的 效果 。CSS 的 背景 属 
性 如 表 2-7 所 示 。 
表 2-7 CSS 的 背景 属性 




















属 性 描 述 
background-color 设 定 背景 颜色 
background-image 设 定 背 景 图 片 
background-attachment 图 片 是 否 跟随 内 容 滚 动 
background-position 背景 图 片 的 最 初 位 置 
background 可 设置 背景 的 所 有 相关 属性 














在 CSS3 之 前 ,背景 图 片 的 尺寸 是 由 实际 尺 二 决定 的 。CSS3 能 够 使 用 像素 或 百分比 来 
定义 背景 图 片 的 尺寸 。 若 以 百分比 规定 尺寸 , 则 尺寸 相对 于 父 元 素 的 宽度 和 高 度 。 
例如 使 用 像素 规定 背景 图 片 的 宽度 和 高 度 ,主要 代码 如 下 : 
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div 

{ 
background: url(flower. gif); 
background— size: 100px 75px; 
background— repeat: no - repeat; 

1: 


又 如 使 用 百分比 规定 背景 图 像 的 尺寸 ,假设 按 指定 的 宽 、 高 百分比 对 背景 图 片 进行 伸 
缩 ,使 其 完成 填充 内 容 区 域 。 其 主要 代码 如 下 : 


div 

{ 
background: url(flower. gif); 
background— size: 40% 100%; 
background— repeat: no - repeat; 

1 














使 用 background-origin 属性 确定 背景 图 片 的 区 域 。 如 图 2-9 所 示 ,背景 图 片 可 以 放置 
于 content-box、padding-box 或 border-box 区 域 。 








图 2-9 背景 图 片 的 定位 区 域 





在 content-box 中 定位 背景 图 片 : 


div{ 
background: url(flower. gif); 
background— repeat: no— repeat; 
background— size: 100% 100% 
background — origin: content — box; 
} 


CSS3 允许 为 元 素 使 用 多 个 背景 图 像 , 例 如 为 body 元 素 设置 两 幅 背 景 图 片 : 
body { 


background— image: url(sky. jpg), url(sun. jpg); 
) 


4. 边框 属性 











使 用 CSS 边框 属性 可 以 在 文本 周围 创建 出 效果 出 色 的 边框 ,并 且 可 以 应 用 于 任何 元 
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素 。 元 素 的 边框 就 是 围绕 元 素 内 容 和 内 边 距 的 一 条 或 多 条 线 。 每 个 边框 有 3 个 方面 , 即 宽 
度 , 样 式 及 颜色 , 见 表 2-8。 





表 2-8 CSS 的 边框 属性 























属 性 描 述 
border-style 设 定 上 、 下 , 左 、 右 边框 的 风格 
border-width 设 定 上 .下 , 左 , 右 边框 的 宽度 
border-color 设 定 上 .下 ,左右 边框 的 颜色 
border 可 设置 边框 的 所 有 属性 


边框 模块 是 CSS3 中 最 常用 的 特性 之 一 ,之 前 开发 者 需要 使 用 多 个 div 元 素 或 带 有 圆 角 
的 图 片 实现 圆 角 边框 ,在 CSS3 中 只 需要 添加 少量 样式 规则 即 可 。 例 如 : 


div { 
border — radius:10px; 
box — shadow:6px 6px rgba(0,0,0,0.5); 


上 述 代码 除 添加 一 个 圆 角 边框 之 外 还 为 div 元 素 周围 设置 阴影 。 使 用 CSS3 边框 特性 
的 代码 如 下 。 
例 2-4 CSS3 边框 特性 (02-04. html) 。 


<l!doctype htm]l > 
<html xmlns = "http://www. w3. org/1999/xhtml"> 
< head > 
<meta http— equiv = "Content - Type" content = "text/html; charset = utf - 8"/> 
<title> CSS3 Borders </title> 
<style type = "text/css"> 
.pageFeel { 
border: 1px solid #CCCCCC; 
width: 400px; 
height: 200px; 
border — radius: 10px; 
box - shadow: 5px 5px rgba(0,0,0,0.2); 
1 
</style> 
</head > 
<body > 
<div class = "pageFeel"> 
This is a rounded border with shadow! 
</div> 
</body > 
</html > 


在 浏览 器 中 执行 的 效果 如 图 2-10 所 示 。 
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This is a rounded border with shadow! 





图 2-10 CSS3 的 边框 特性 


5. 边 距 属性 
边 距 属性 设置 页 面 中 一 个 元 素 所 占 空 间 的 边缘 到 相 邻 元 素 之 间 的 距离 , 见 表 2-9。 
表 2-9 CSS 的 边 距 属性 




















属 ”性 描 述 
margin-left 设 定 左 边 距 的 宽度 
margin-right 设 定 右 边 距 的 宽度 
margin-top 设 定 上 边 距 的 宽度 
margin-bottom 设 定 下 边 距 的 宽度 
margin 可 以 设置 上 、 下 \ 左 右边 距 的 属性 


例 2-5 设置 元 素 的 上 、 下 、 左 、 右 边 距 ( 宽 度 相同 )。 


<html > 
<head> 
<title> CSS 边 距 属性 margin </title> 
<style type = "text/css"> 
.D1{border:1px solid #FF0000;} 
.D2{border:1px solid gray;} 
.D3{margin:1cm; border:1px solid gray;} 
</style> 
</head> 
<body> 
<div class= "D1"><div class = "D2"> 没 有 margin</div></div> 
<p> 上 面 的 div 没有 设置 边 距 属性 , 仅 设置 了 边框 属性 (border).</p> 
<hr> 
<p> 下 面 的 div 设置 了 边 距 属性 为 1 厘米 ,表示 上 下 左右 边 距 都 为 1 厘米 </p> 
<div class= "D1"><div class = "D3"> margin 设 为 lcm</div></div> 
</body > 
</html > 
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在 浏览 器 中 打开 后 的 效果 如 图 2-11 所 示 。 





OB /eon -oS comm moron 
1 
上 面 的 div 没 有 设置 边 距 属性 ， 仅 设置 了 边框 属性 (border)。 








下 面 的 dix 设 置 了 边 距 属性 ， 边 距 1 厘米 ， 表 示 上 下 左右 边 距 都 为 1 厘米 。 














| nargin 设 为 lem 




















图 2-11 设置 元 素 的 上 、 下 、 左 、 布 边 距 








6. 列表 样式 属性 

















使 用 CSS 的 列表 样式 属性 可 以 放置 .改变 列表 项 标志 ,或 者 将 图 像 作 为 列表 项 标志 , 见 
表 2-10。 


表 2-10 CSS 的 列表 样式 属性 

















属 性 描 述 
list-style-type 设置 列表 样式 类 型 
list-style-position 设置 列表 样式 位 置 
list-style-image 设置 列表 样式 图 片 
list-style 设置 列表 样式 的 所 有 属性 


例如 , 设 定 列表 样式 相关 属性 的 代码 如 下 : 


<html > 
<head ><title > 列表 样式 list - style</title> 
< style type = "text/css"> 
ul {list— style:circle inside url(../images/dot02.gif)} 
</style> 
</head> 
<body> 
<ul><1li> 茶 </1i><1i> 咖 啡 </1i><1i> 可 乐 </1i></ul > 
</body > 
</html > 


7. 间隙 属性 








间隙 属性 (Padding) 用 来 设置 元 素 内 容 到 元 素 边 界 的 距离 , 见 表 2-11。 


(0) ASP .NET Web 应 用 开发 技术 ( 第 2 版 ) 


表 2-11 CSS 的 间隙 属性 











属 性 描 述 
padding-left 设 定 左 间隙 的 宽度 
padding-right 设 定 右 间 隙 的 宽度 
padding-top 设 定 上 间 院 属性 





margin-bottom 


设 定 下 间隙 属性 





Padding 





例如 可 以 为 上 `. 下 \ 左 \ 右 间隙 设置 相同 的 宽度 ,代码 如 下 : 


.dl {padding:1cm} 


用 户 也 可 以 分 别 设置 间隙 ,顺序 是 上 、 右 \ 下 、 左 ,代码 如 下 : 


.dl {padding:1cm 2cm 3cm 4cm} 


表示 上 间隙 为 lcm、 右 间隙 为 2cem、 下 间隙 为 3cm、 左 间隙 为 tcm。 


8. 定位 属性 


同时 设 定 上 、 下 、 左 、 布 间隙 属性 


使 用 CSS 定位 (Positioning) 属 性 可 以 对 元 素 进行 定位 。 利 用 这 些 属性 可 以 定义 元 素 的 


位 置 、 可 见 性 ,移动 元 素 、 堆 秋元 素 等 。 





定位 的 基本 思想 很 简单 ,就 是 允许 用 户 定义 元 素 框 相 


对 于 其 正常 位 置 的 定位 ,或 者 相对 于 父 元 素 、 另 一 个 元 素 甚至 浏览 器 窗口 本 身 的 位 置 。CSS 


的 定位 属性 见 表 2-12。 


表 2-12 CSS 的 定位 属性 



































属 性 描 述 
position 定义 元 素 的 定位 方式 (absolute ,fixed ,relative static ,inherit) 
top 定义 元 素 的 顶部 边缘 (元 素 顶 部 的 垂直 位 置 ) 
right 定义 元 素 的 右边 缘 
bottom 定义 元 素 的 底部 边缘 
left 定义 元 素 的 左边 缘 ( 元 素 左边 的 水 平 位 置 ) 
overflow 设置 当 元 素 的 内 容 溢出 其 区 域 时 发 生 的 事情 
clip 设置 元 素 的 形状 , 即 规定 一 个 元 素 的 可 见 尺寸 
vertical-align 设置 元 素 的 垂直 对 齐 方式 
z-index 设置 元 素 的 堆 重 顺序 


[2.4 习题 与 上 机 练习 
A 


1. 填空 题 


(1) HTML 网 页 文件 的 标记 是 :网 页 文件 的 主体 标记 是 


标题 的 标记 是 。 


:标记 页 面 
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(2) 表格 的 标签 是 ,单元 格 的 标签 是 。 表 格 的 宽度 可 以 用 百分比 和 
两 种 单位 来 设置 。 
(3) 表单 对 象 的 名 称 由 属性 设 定 ; 提交 方法 属性 指定 ; 若 要 提交 
大 量 数据 , 则 应 采用 方法 ; 表单 提交 后 的 数据 处 理 程序 属性 指定 。 
(4) CSS 样式 的 基本 结构 由 Ss 和 3 个 部 分 组 成 。 
2. 选择 题 
(1) 下 面 ( ) 属 性 不 是 文本 的 标签 属性 。 
A. nbsp; B. align C. color D. face 
(2) 下 列表 示 不 是 按钮 的 是 ( ) 。 
A. type= "submit" B. type="reset" 
C. type= "image" D. type="button" 
(3) 下 列 HTML 标记 中 属于 非 成 对 标记 的 是 ( Ds 
A. <li> B. <ul> CPS> D. <font> 
(4) 若 设计 网 页 的 背景 图 形 为 bg. jpg, 以 下 标记 正确 的 是 ( js 
A. <body background= "bg. jpg"> B. < body bground= "bg. jpg"> 
C. < body image= "bg. jpg"> D. < body bgcolor= "bg. jpg"> 


(5) 若 在 页 面 中 创建 一 个 图 形 超 链 接 , 要 显示 的 图 形 为 myhome. jpg、 所 链接 的 地 址 为 
“http://www. pcnetedu. com”, 以 下 用 法 中 正确 的 是 ( 了 
A. <a href="http://www. pcnetedu. com"> myhome. jpg </a > 
B. < a href=" http://www. pcnetedu. com">< img src="myhome. jpg"></a> 
C. <img src 一 "myhome. jpg">< a href ="http://www. pcnetedu. com"></a> 
D. <a href =http://www. pcneredu. com >< img src="myhome. jpg"> 
(6) 下 面 说 法 错误 的 是 (。”)。 
A. CSS 样式 表 可 以 将 格式 和 结构 分 离 
B,CSS 样式 表 可 以 控制 页 面 的 布局 
C. CSS 样式 表 可 以 使 许多 网 页 同时 更 新 
D. CSS 样式 表 不 能 制作 体积 更 小 .下 载 更 快 的 网 页 
(7) 若 要 在 网 页 中 插入 样式 表 main. css, 以 下 用 法 正确 的 是 ( a 
A. <link href="main. css" type=text/css rel 一 stylesheet > 
B. <link src 一 "main. css" type=text/css rel= stylesheet > 
C. <link href="main. css" type=text/css > 


D. < Include href 一 "main. css" type=text/css rel 一 stylesheet > 




















(8) 引用 外 部 样式 表 的 元 素 应 该 放 在 ) 。 
A. HTML 文档 的 开始 位 置 B. HTML 文档 的 结束 位 置 
C. head 元 素 中 D. body 元 素 中 

(9) 下 列 (  ) 项 是 CSS 正确 的 语法 构成 。 
A. body:color=black B. {body;color:black} 


C. body {color: black;} D. . {body:color= black(body} 
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(10) 如 果 需 要 在 XML 文件 中 显示 简体 中 文 ,那么 encoding 一 ) 。 
A. GB2312 B. BIG5 C. UTF-8 D. UTF-16 


3. 上 机 练习 


设计 一 个 网 站 登录 主页 面 并 使 用 CSS 样式 表 。 

(1) 设置 页 面 背 景 图 像 为 login_back. gif, 使 用 CSS3 定义 背景 图 像 尺 寸 。 

(2) 使 用 类 选择 器 设置 按钮 的 样式 。 按 钮 的 背景 图 像 为 login_submit. gif、 字 体 颜 色 为 
#FFFFFFF 字体 大 小 为 14px、 字 体 粗 细 为 bold, 按 钮 的 边界 、 边 框 和 填充 均 为 0px。 























客户 端 编程 技术 与 开发 框架 | 


JavaScript 是 一 种 解释 型 脚本 语言 ,其 最 初 设计 目的 是 在 HTML 网 页 中 增加 动态 效果 
和 交互 功能 。 随 着 Web 技术 的 发 展 ,JavaScript 与 其 他 技术 相 结 合 ,产生 了 客户 端 与 服务 器 
端 异步 通信 的 AJAX 技术 ,为 用 户 提 供 更 加 丰富 的 上 网 体验 。 本 章 首先 讲解 JavaScript 语 
法 及 对 象 化 编程 等 基础 知识 ,然后 介绍 目前 最 流行 的 JavaScript 编程 框架 jQuery, 最 后 简单 
介绍 BootStrap 前 端 开发 框架 的 使 用 。 


6.1 JavaScript 概述 
2 


3.1.1 什么 是 JavaScript 


JavaScript 主要 用 于 客户 端 脚本 编程 ,通常 嵌入 在 HTML 代码 中 ,由 浏览 器 解释 和 运 
行 。JavaScript 与 CC++ 和 Java 类 似 , 有 分 支 . 循 环 等 控制 结构 及 异常 处 理 机 制 , 还 具有 基 
于 对 象 和 事件 驱动 的 特性 ,可 以 通过 文档 对 象 模 型 (DOMD) 访问 浏览 器 及 页 面 中 的 各 个 对 
象 ,捕获 对 象 的 特定 事件 并 编写 代码 处 理事 件 。 

JavaScript 可 以 实现 的 基本 功能 如 下 。 

(1) 控制 文档 的 外 观 和 内 容 : 用 户 可 以 通过 Document 对 象 的 write 方法 将 内 容 写 入 文 
档 中 ,也 可 以 调用 Document 对 象 的 getElementById 方法 找到 文档 中 的 某 个 对 象 ,然后 动 
态 地 改变 其 内 容 和 外 观 。 

(2) 验证 表单 输入 内 容 : 在 客户 端 取得 的 表单 中 输入 数据 并 进行 验证 ,只 有 当 数据 合 
法 时 才 提 交 给 服务 器 ,减轻 了 服务 器 的 处 理 负荷 。 

(3) 实现 客户 端的 计算 和 处 理 : 从 表单 中 读 取 客户 输入 的 数据 进行 相应 的 计算 和 





处 理 。 
(4) 设置 和 检索 cookie: 将 用 户 名 、 账 号 等 用 户 的 特定 信息 持久 地 保存 于 cookie 中 , 当 
户 下 一 次 访问 网 站 时 自动 地 读 取 这 些 信息 。 

(5) 捕 提 用 户 事件 并 相应 地 调整 页 面 : 根据 键盘 或 鼠标 的 动作 使 页 面 的 某 一 部 分 变 得 
[编辑 。 
(6) 在 不 离开 当前 页 面 的 情况 下 与 服务 器 端 应 用 程序 进行 交互 : 这 是 AJAX 的 基础 ， 
可 以 用 于 填充 选项 列表 、 更 新 数据 以 及 刷新 显示 ,并 且 不 需要 重新 载 和 人 页面 。 这 有 助 于 减少 
表单 提交 次 数 ,从 而 节约 服务 器 资源 。 
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才能 


经 不 


样 可 


3.1.2 在 网 页 中 翌 入 JavaScript 脚本 








和 其 他 脚本 语言 一 样 ,JavaScript 程序 不 能 独立 运行 ,只 有 把 它 嵌 入 到 HTML 网 页 中 
运行 。 引 入 JavaScript 脚本 的 方式 有 以 下 3 种 : 

。 在 HTML 文档 中 直接 由 入 脚本 程序 。 

。 在 HTML 文档 中 链接 脚本 文件 。 

。 在 HTML 标记 内 嵌入 JavaScript 代码 。 

下 面 分 别 对 以 上 3 种 方式 进行 描述 。 





1. 在 HTML 文档 中 直接 嵌入 脚本 程序 




















户 可 以 使 用 < script > 标记 将 JavaScript 脚本 块 举 入 HTML 页 面 中 ,用 法 如 下 : 














< script > 
JavaScript 脚本 块 ; 
</script > 


早期 的 规范 要 求 在 < script > 标签 中 使 用 type 一 "textViavascript "指定 脚本 语言 ,现在 已 
用 这 样 做 了 ,JavaScript 是 所 有 现代 浏览 器 以 及 HTML5 中 的 默认 脚本 语言 。 

JavaScript 脚本 块 可 以 放 在 HTML 页 面 中 的 任何 位 置 ,但 通常 放 在 < head > 标记 内 ,这 
以 保证 在 页 面 装载 前 脚本 已 经 加 载 完成 ,页 面 可 以 随时 调用 脚本 代码 ; 若 放 在 < body > 











内 , 则 可 能 出 现 页 面 中 调用 脚本 而 脚本 代码 尚未 加 载 的 情况 。 


览 器 


例 3-1 在 HTML 中 租 入 JavaScript 脚本 (03-01. html)。 


<html> 
<head> 
<script> 
document. write ("Hello, world!") // 直接 在 浏览 器 中 显示 提示 信息 
alert("Hello, world!") // 弹出 对 话 框 显示 提示 信息 
</script> 
</head> 
<body > </body > 
</html > 


在 上 述 代码 中 document. write() 是 文档 对 象 的 输出 函数 , 它 将 括号 中 的 内 容 输出 到 浏 
窗口 ;alert() 是 窗口 对 象 的 方法 ,用 于 弹出 一 个 对 话 框 。 值 得 注意 的 是 ,脚本 是 大 小 写 

















敏感 的 ,例如 将 document. write() 写 成 Document. write() ,程序 将 无 法 正确 执行 。 程 序 的 
运行 结果 如 图 3-1 所 示 。 


2. 在 HTML 文档 中 链接 脚本 文件 
为 便于 代码 重用 ,开发 人 员 可 以 将 JavaScript 代码 保存 到 扩展 名 为 . js 的 文件 中 ,这 样 























就 可 以 被 多 个 HTML 文件 引用 。 这 需要 在 < script > 标记 中 使 用 src 属性 导入 外 部 脚本 文 
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图 3-1 在 HTML 中 嵌入 JavaScript 脚本 





件 , 格 式 如 下 : 


< script src= "文件 名 . js"> </script > 


例 3-2 在 HTML 中 链接 外 部 脚本 文件 (03-02. html) 。 


< html > 
<head > 
<script src = "test01. js" > </script > 
</head> 
<body > </body> 
</html > 


其 中 ,脚本 文件 test01.js 的 内 容 如 下 ; 


document. write("Hello，world!") ; 
alert("Hello, world!"); 


以 上 页 面 的 显示 效果 同 图 3-1。 


3. 在 HTML 标记 内 散 入 JavaScript 代码 








在 HTML 标记 中 嵌入 JavaScript 脚本 代码 ,以 便 响应 相关 事件 。 例 如 单 击 页 面 中 的 一 
个 按钮 ,弹出 alert 对 话 框 。 

例 3-3 在 HTML 标记 中 嵌入 JavaScript 脚本 并 执行 (03-03. html) 。 

<htmnl > 

<head> <title> 在 标记 内 添加 脚本 测试 </title> </head> 

<body> 

<button onClick = "alert( ' 这 是 标记 内 的 脚本 !')"> 在 标记 内 添加 脚本 测试 </button> 
</body > 


</html > 
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在 button 标记 的 onClick 属性 中 直接 写 了 一 句 JavaScript 代码 , 当 单 击 该 按钮 时 将 触 
发 执行 该 代码 。 


3.1.3 使 用 JavaScript 输入 与 输出 信息 


在 JavaScript 中 常用 的 字符 串 输入 输出 方法 有 Document 对 象 的 write() 方 法 .window 
对 象 的 alert() 方 法 、 消 息 框 等 。 消 息 框 包括 确认 框 、 提 示 框 等 。 








1. 利用 Document 对 和 象 的 write() 方 法 输出 字符 串 
其 功能 是 向 页 面 输出 文本 ,具体 格式 如 下 : 
document. write(" 待 输出 的 字符 串 ")， 


注意 : 仅 在 文档 加 载 时 使 用 document. write() 向 文档 中 写 内 容 , 如 果 文 档 已 完成 加 载 ， 
再 执行 document. write, 则 整个 HTML 页 面 将 被 覆盖 。 


2. 利用 警告 框 

警告 框 用 于 弹出 一 个 带 “ 确 定 ” 按 钮 的 对 话 框 ,并 显示 要 输出 的 字符 串 , 具 体格 式 如 下 : 
alert (" 待 输出 的 字符 串 "); 

当 警 告 框 出 现 后 ,用 户 需 要 单 击 “ 确 定 ” 按 钮 才能 继续 进行 操作 。 

3. 使 用 确认 框 


当 需 要 确认 或 者 接受 某 项 操作 时 ,通常 用 JavaScript 弹出 一 个 确认 框 , 用 户 必须 单 击 
“确定 ?或 “取消 ”按钮 才能 继续 。 
例 3-4 ”确认 框 示例 (03-04. html) 。 


<html > 
<head> <title> 确 认 框 示例 </title> 
< Script > 
function test() { 
var value = confirm(" 确 定 要 执行 该 操作 吗 ?"); 
alert(" 你 的 选择 是 : " + value); 
下 
</script> 
</head > 
<body> 
确认 框 示例 < button onClick = "test()"> 测 试 </button> 
</body> 
</html > 
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当 单 击 “ 测 试 ”按钮 时 将 弹出 确认 框 ,如 图 3-2 所 示 。 在 确认 框 中 单 击 “ 确 定 ” 按 钮 将 返 
true, 单 击 “ 取 消 " 按 钮 将 返回 false。 




















图 3-2 确认 框 示例 


4. 使 用 提示 框 输入 内 容 

在 程序 中 有 时 要 提示 用 户 输入 一 个 值 ,这 可 以 通过 提示 框 实现 ,格式 如 下 : 
prompt(" 提 示 文 本 "," 默 认 值 ") 

例 3-5 ”提示 输入 框 示 例 (03-05. html) 。 


<html > 
<head > 
<title> 提 示 输 入 框 示例 </title> 
< script type = "text/javascript"> 
function test() { 
var value = prompt(" 请 输入 你 的 名 字 ", "佚名 ") 
alert(" 您 的 名 字 是 : " + value); 
} 
</script > 
</head> 
<body> 
提示 输入 框 示 例 < button onClick = "test()"> 测 试 </button> 
</body> 
</html > 








单 击 “ 测 试 ”按钮 将 弹出 如 图 3-3 所 示 的 输入 框 。 当 用 户 输 入 一 个 值 后 , 单 
钮 将 返回 输入 值 , 单 击 “ 取 消 " 按 钮 将 返回 空 值 null。 


“确定 * 按 


Er 
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图 3-3 提示 输入 框 示例 


电 JavaScript 基本 语法 


和 其 他 计算 机 语言 一 样 ,JavaSeript 也 有 自己 的 基本 数据 类 型 运算 符 、 表 达 式 及 流程 
控制 语句 等 。 


3.2.1 数据 类 型 


JavaScript 可 以 使 用 下 面 6 种 基本 数据 类 型 。 

。 string( 字 符 串 ) 类 型 : 用 单 引 号 或 双 引 号 括 起 来 的 一 个 或 几 个 字符 。 
。 number( 数 值 ) 类 型 : 可 以 是 整数 或 浮 点 数 。 

。 boolean( 布 尔 ) 类 型 : 值 为 true 或 者 false。 

。 object( 对 象 ) 类 型 : 用 于 定义 对 象 。 

。 null( 空 值 ) 类 型 : 用 于 清空 变量 值 。 

。 undefined( 未 定义 ) 类 型 : 表示 变量 不 含有 值 。 


3.2.2 变量 


JavaScript 是 一 种 弱 类 型 语言 ,并 不 要 求 一 定 要 对 变量 进行 声明 。 为 了 避免 混淆 ,用 户 
最 好 养 成 声明 变量 的 习惯 。 在 JavaScript 中 用 关键 字 “var" 来 声明 变量 ,语法 如 下 : 


var 变量 名 1， 变量 名 2，… ,变量 名 n 
在 声明 中 仅 指定 了 变量 名 ,在 为 变量 赋值 时 系统 会 自动 判断 类 型 并 进行 转换 。 这 也 意 


味 着 在 程序 执行 过 程 中 程序 员 可 以 根据 需要 随意 改变 某 个 变量 的 数据 类 型 。 
例如 : 
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var test; // 声明 变量 
var level = 10, amount = 100; // 在 变量 声明 的 同时 进行 初始 化 
test = 100; 


test = "Hello” 


如 果 在 声明 时 没有 对 变量 进行 初始 化 ,变量 将 自动 取 值 undefined。 
此 外 ,JavaScript 还 提供 了 强制 类 型 转换 函数 ,常用 的 有 number() 和 string()。 
例如 : 


number( ch); // 将 字符 型 数据 "ch" 转 换 为 数值 型 
string(x); // 将 数值 型 数据 x 转换 为 字符 型 


3.2.3 运算 符 和 表达 式 

在 JavaScript 中 构成 表达 式 的 主要 元 素 是 运算 符 , 根 据 运 算 符 可 以 将 表达 式 分 为 算术 
表达 式 .关系 表达 式 和 逮 辑 表达 式 等 ,这 些 表 达 式 可 以 共同 构成 一 个 复合 表达 式 。 

表 3-1 将 运算 符 按 优先 级 从 高 到 低 的 顺序 排列 。 
表 3-1 JavaScript 的 运算 符 

































































描述 符 号 说 明 
括号 “| (zx) [x] 中 括号 只 用 于 指明 数组 的 下 标 
一 并 返回 zx 的 相反 数 
lz 返回 与 x (布尔 值 ) 相 反 的 布尔 值 
z++ 之 值 加 1 ,但 仍 运 回 原来 的 二 值 
自 减 “ | 一 二 工 值 减 1, 但 仍 返 回 原来 的 x 值 
十 十 工 斌 值 加 1, 返回 后 来 的 zx 值 
= 工 值 减 1, 返回 后 来 的 x 值 
XYy 返回 zx 乘 以 > 的 值 
xz/y 返回 工 除 以 y 的 值 
算术 运算 |z%y 返回 zx 与 > 的 模 (z 除 以 y 的 余数 ) 
Z 十 y 返回 z+ 加 y 的 值 
工 一 y 返回 + 减 y 的 值 
关系 运算 符合 条 件 时 ,返回 true, 和 否则 返回 false 
Zz&y 位 与 : 当 两 个 数位 同时 为 1 时 ,返回 1, 其 他 情况 都 为 0 
位 运算 |z^y 位 异 或 : 当 两 个 数位 中 有 且 只 有 一 个 为 0 时 ,返回 0, 和 否则 返回 1 
Zly 位 或 : z 或 > 为 1 则 返回 1; 当 z 和 y 均 为 0 时 ,返回 0 
zR&R&y 当 工 和 y 同时 为 true 时 ,返回 true, 和 否则 返回 false 
修 辑 运算 : 
zlly 当 工 和 y 中 的 任 一 个 为 true 时 ,返回 true; 当 两 者 均 为 false 时 ,返回 false 











条 件 运 算 | c? z:y 当 条 件 c 为 rue 时 ,返回 z, 和 否则 返回 y 
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续 表 
描述 符 号 说 明 
Z 一 y 把 y 的 值 赋 给 xz, 返回 所 赋 的 值 
2 证 三 六 工 与 y 相 加 ,将 结果 赋 给 zz, 返回 赋值 后 的 xz 值 
ee | ss 工 与 y 相 减 ,将 结果 赋 给 zx, 返回 赋值 后 的 z 值 
赋值 运算 






































守 关 二 工 与 y 相 乘 ,将 结果 赋 给 zx, 返回 赋值 后 的 z 值 
对 三 工 与 y 相 除 ,将 结果 赋 给 ,返回 赋值 后 的 zx 值 
工 与 y 求 余 ,将 结果 赋 给 zx, 返回 赋值 后 的 z 值 
字符 串 5 字符 串 与 数字 一 起 执行 “十 ”运算 时 ,实际 上 也 是 执行 连接 运算 。 例 如 “z= 
连接 - 5 5” ,结果 zx 的 值 为 字符 串 "55" 


位 运算 符 通常 被 当 作 侵 辑 运 算 符 使 用 。 把 两 个 操作 数 ( 即 x 和 y) 转 化 成 二 进 








每 个 数位 执行 运算 后 得 到 一 个 新 的 二 进 制 数 。 通 常 ,“ 真 " 值 是 全 部 数位 为 1 的 二 进 


县" 值 是 全 部 数位 为 0, 所 以 位 运算 符 可 以 充当 逻辑 运算 符 。 
3.2.4 流程 控制 
JavaScript 提供 了 多 种 方式 实现 选择 结构 .循环 结构 等 流程 控制 。 
1. 选择 结构 


JavaScript 使 用 if-else 语句 或 switch 语句 实现 选择 结构 的 流程 控制 。 
(1) if-else 语句 的 格式 如 下 : 


if (条 件 ) { 
语句 体 1 

1 

else { 语句 体 2 } 


例如 : 


<script> 
var d= new Date() ; 
var time = d.getHours(); 
if (time <12) document. write("<b> Good morning </b>"); 
else document. write("<b> Good afternoon </b>"); 
</script > 


上 述 代码 根据 当前 时 间 进 行 判断 ,然后 在 浏览 器 中 显示 相应 的 问候 语 。 
(2) switch 语句 用 于 多 路 选择 控制 ,格式 如 下 : 
switch(expr){ 


case 常量 表达 式 1: 代码 段 1; break; 
case 常量 表达 式 2: 代码 段 2; break; 


case 常量 表达 式 n: 代码 段 my brealk; 
default: 默认 代码 段 ; 


FE 制 数 ,对 


FE 制 数 ， 
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在 执行 时 系统 先 对 switch 后 面 的 表达 式 expr 求 值 ,然后 用 求 得 的 结果 与 case 后 的 各 
常量 表达 式 值 作 比较 。 若 与 某 case 相 匹 配 , 则 执行 该 case 后 面 的 代码 段 ; 若 所 有 case 表达 
式 都 不 匹配 , 则 执行 default 后 的 默认 代码 段 。 在 执行 完 一 个 代码 段 后 通常 使 用 break 语句 
跳出 选择 结构 。 

例 3-6 多 路 选择 结构 Cswitch 语句 ) 示 例 (03-06. html) 。 












































<html > 
<head > 
<title> switch 语句 示例 </title> 
< Seript> 
var now = new Date(); 
var date = now. getDay(); 
switch (date) { 
case 1: alert(" 今 天 是 星期 一 "); break; 
case 2: alert(" 今 天 是 星期 二 "); break; 
case 3: alert(" 今 天 是 星期 三 "); break; 
case 4: alert(" 今 天 是 星期 四 "); break; 
case 5: alert(" 今 天 是 星期 五 "); break; 
case 6: alert(" 今 天 是 星期 六 "); break; 
default: alert(" 今 天 是 星期 日 "); 
} 
</script > 
</head > 
<body ></body> 
</html > 





2. 循环 结构 


JavaScript 提供 了 3 种 循环 控制 语句 , 即 while 语句 .do-while 语句 和 for 语句 。 
1) while 语句 
while 循环 语句 是 当 满 足 指定 条 件 时 不 断 地 重复 执行 循环 体 。 其 语法 格式 如 下 : 
while (条 件 ) { 


循环 体 
} 


2) do-while 语句 

do-while 循环 是 while 循环 的 一 种 变 体 , 它 首先 执行 循环 体 , 再 判断 条 件 表达 式 , 如 果 
条 件 表达 式 的 值 为 真 , 则 继续 执行 循环 体 ,否则 退出 循环 。 也 就 是 说 循环 至 少 执行 一 次 。 其 
语法 格式 如 下 : 

dof 


循环 体 
} while( 条 件 表达 式 ) 
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3) for 语句 
for 循环 用 于 将 代码 块 执行 指定 的 次 数 , 格 式 如 下 : 


for( 循环 变量 赋 初 值 ; 循环 条 件 ; 循环 变量 增值 ) { 
循环 体 


和 其 他 程序 设计 语言 一 样 ,分 支 和 循环 都 可 以 嵌 套 ,请 看 以 下 示例 。 
例 3-7 打印 乘法 口诀 表 (03-07. html) 。 


<html > 
<head > 
<title> for 循环 语句 打印 乘法 口诀 </title> 
<script> 
for (vari = 1;i<= 9; it+){ 
For (var = ly .den 9 jet 


if (j<=i){ // 只 打印 下 三 角 
document. write("\t"+j+"x"+i+"="+(ixj)); 
} 
document. write( "< br/>"); // 换行 

</script > 

</head> 

<body ></body> 

</html > 


程序 的 运行 结果 如 图 3-4 所 示 。 


大 fr 三 环 语句 打印 乘法 x | | 





1*1=1 
1*2=2 2*2=4 


0 3*5=15 4*5=20 5*5=25 
2 3*6=18 4*6=24 5*6=30 6*6=36 
1*7=7 2*7=14 3*7=21 4*7=28 5*7=35 6*7=42 7*7=49 
1*8=8 2*8=16 3*8=24 4*8=32 5*8=40 6*8=48 7*8=56 8*8=64 
1*9=9 2*9=18 3*9=27 4*9=36 5*9=45 6"9-54 7*°9=63 8*9=72 9*9=81 








图 3-4 使 用 for 循环 打印 的 乘法 表 


4) break 和 continue 语句 

break 和 continue 用 于 改变 程序 的 正常 流程 .说明 如 下 。 

(1) break 语句 : 出 现在 循环 语句 或 switch 语句 内 ,用 于 强行 跳出 循环 或 switch 语句 。 
在 嵌 套 循环 中 , break 语句 只 跳出 当前 循环 体 ,并 不 跳出 整个 嵌 套 循环 。 
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(2) continue 语句 : 用 在 循环 结构 中 ,作用 是 跳 过 循环 体内 剩余 的 语句 而 提前 进入 下 一 
次 循环 。 


3.2.5 函数 

函数 是 已 命名 的 代码 块 ,并 作为 一 个 整体 被 调用 执行 。 
1. 定义 函数 

JavaScript 中 定义 函数 的 一 般 形 式 如 下 : 





function 函数 名 (形式 参数 列表 ){ 

语句 块 ; 

return 返回 值 ; // 当 函 数 无 返回 值 时 不 用 此 语句 
} 


说 明 : 函数 名 是 调用 函数 时 所 引用 的 名 称 。 形 式 参 数 表 用 于 接收 传 入 的 数据 。 在 调用 
函数 时 实际 参数 的 个 数 和 类 型 必须 与 形式 参数 一 致 。 如 果 要 返回 一 个 值 , 则 应 使 用 return 
语句 。 


例如 下 列 函 数 用 于 计算 n 的 阶乘 : 


Function fact (n) { 
var fact = 1; 
for (var i=1; i<=n; i++) fact=fact xi; 


return fact; 


2. 调用 函数 

通常 有 两 种 方式 调用 函数 ,一 是 语句 调用 ,二 是 事件 调用 。 
1) 语句 调用 
在 程序 语句 中 调用 函数 的 形式 如 下 : 





函数 名 (实际 参数 列表 ) 


说 明 : 实际 参数 应 与 定义 函数 时 的 形式 参数 一 一 对 应 。 如 果 在 定义 的 时 候 没 有 参数 ， 
在 调用 的 时 候 也 不 用 参数 ,但 括号 不 能 省 略 。 
例 3-8 ”函数 的 语句 调用 (03-08. html) 。 














<script> 
a=2; 
b= 3 
add(a, b); 
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function add(a,b) { 
alert("a 与 b 两 数 之 和 为 ”+ (a+b)); 
1 
</script > 


注意 : 当 被 调用 的 函数 有 返回 值 时 可 以 使 用 以 下 格式 调用 : 
变量 名 = 函数 名 ( 参数 列表 ) 


例 3-9 有 返回 值 函 数 的 调用 (03-09. html) 。 


<script > 
function add(a, b){ 
return (a+b); 
} 
var result = add(2,3); 
alert( "a 与 b 两 数 之 和 为 "+ result); 
</script > 


这 里 使 用 变量 result 接收 并 保存 了 函数 的 返回 值 。 

2) 事件 调用 

在 网 页 中 经 常 要 捕获 某 些 事件 ,由 事件 触发 某 段 代码 的 执行 。 例 如 当 鼠 标 单 击 按钮 时 
调用 某 函 数 ,或 者 当 鼠 标 指针 指向 一 个 对 象 时 调用 某 函 数 。 

例 3-10 ”函数 的 事件 调用 (03-10. html) 。 


<html > 
<head> 
<title> javascript 函数 的 事件 调用 </title> 
<script> 
function showmessage( ) { 
alert(" 这 是 javascript 事件 调用 函数 "); 
} 
</script > 
</head> 
<body> 
< input type = "button" value = "鼠标 单 击 事件 调用 函数 " onClick = "showmessage ()" /> 
</body > 
</html > 





程序 运行 结果 如 图 3-5 所 示 。 当 用 户 单 击 页 面 上 的 按钮 时 就 会 调用 showmessage() 函 
数 ,弹出 一 个 消息 框 。 

3. 变量 的 作用 域 

变量 通常 都 有 自己 的 作用 范围 。 在 函数 之 外 定义 的 变量 为 全 局 变量 ,可 在 各 个 函数 之 
间 共 享 ; 在 函数 内 部 用 var 声明 的 变量 为 局 部 变量 ,只 在 当前 函数 内 部 有 效 ; 但 那些 在 函数 
内 部 没有 用 var 声明 的 变量 ,在 赋值 后 也 会 被 当成 全 局 变量 使 用 。 例 如 
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图 3-5 函数 的 事件 调用 


function inc(n) { 
y= ++tn; 
return(y); 

由 

var x= 3; 

var sum = inc(x) +y; 


alert(sum); // sun 的 值 是 8 


在 上 述 代码 中 ,函数 inc 的 内 部 没有 用 var 声明 变量 y, 当 inc 函数 执行 完 后 局 部 变量 y 
变 成 了 全 局 变量 , 它 的 值 仍 然 存 在 ,所 以 inc(Cz) 十 y 的 值 是 8。 但 如 果 将 incCz) 十 y 改 成 
y 十 inc(z) ,就 会 发 生 错误 ,因为 > 会 被 先 引用 ,此 时 y 还 没有 被 声明 ,所 以 产生 错误 。 


3.2.6 异常 处 理 


在 程序 运行 过 程 中 引发 错误 通常 有 两 种 情况 ,一 是 程序 内 部 的 迎 辑 或 语法 错误 ,二 是 运 
行 环境 或 者 用 户 输入 了 不 可 预知 的 数据 。 前 者 称 为 错误 (error) ,可 通过 调试 程序 来 解决 ; 
后 者 则 称 为 异常 (exception)。 异 常 并 不 等 同 于 错误 ,有 时 还 可 利用 异常 来 解决 某 些 问题 。 
JavaScript 可 以 捕获 异常 并 进行 处 理 , 避 免 了 浏览 器 向 用 户 报错 。 

1. 使 用 try-catch-finally 处 理 异常 


使 用 try-catch-finally 结构 处 理 可 能 发 生 异 常 的 代码 ,格式 如 下 : 

















{ 
// 要 执行 的 代码 
} catch(e) { 
// 处 理 异常 的 代码 
} finally { 
// 无 论 异常 发 生 与 否 , 都 会 执行 的 代码 








try 块 用 于 捕获 异常 , 当 try 块 中 的 某 一 行 代码 抛 出 异常 时 该 行 后 面 的 代码 将 不 再 被 执 
行 , 转 而 执行 catch 块 的 代码 ,在 这 里 处 理 异 常 。 若 后 面 还 有 le 则 不 管 try 块 中 是 
否 有 异常 产生 都 要 执行 finally 块 中 的 语句 。 
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catch 和 finally 块 都 是 可 以 省 略 的 ,但 至 少 要 保留 其 中 之 一 与 try 块 结合 使 用 。 

在 catch 块 中 括号 里 的 参数 e 表示 捕获 到 的 异常 对 象 实例 , 它 包含 异常 的 详细 信息 ,可 
以 在 这 里 根据 不 同 的 异常 类 型 进行 不 同 的 处 理 。 

finally 块 中 的 语句 始终 会 被 执行 ,通常 在 这 里 做 一 些 最 后 的 清理 工作 。 如 果 在 try 块 
中 遇 到 return 等 流程 跳 转 语句 ,要 跳出 异常 处 理 ,程序 的 流程 也 会 先 执 行 finally 中 的 代码 ， 
然后 再 进行 跳 转 。 

如 果 在 一 个 异常 处 理 语句 中 只 包含 try-finally 语句 而 没有 处 理 异常 的 catch 语句 , 则 在 
try 中 抛 出 异常 后 会 直接 执行 finally 块 的 语句 ,最 后 再 将 异常 抛 出 。 

例 3-11 使 用 try-catch-finally 处 理 异 常 (03-11. html) 。 























<html > 
<head > 
<title> 使 用 try- catch- finally 处 理 异 常 </title> 
<script> 
try{ 
var date = new Date( ); 
date. test(); // 调用 date 对 象 的 test 方 法 ,但 未 定义 该 方法 
document.write("try 块 执 行 结束 < br >"); 
}catch(error){ 
with( document ) { 
write(" 出 现 了 异常 <br >"); 
write(" 异 常 类 型 : " + error. name + "<br>"); 
write(" 异 常 消息 : " + error.message+ "<br>"); 
}finally{ 
document. write("< br > 异常 处 理 完毕 !"); 
} 
</script> 
</head> 
<body > </body> 
</html > 


程序 运行 结果 如 图 3-6 所 示 。 可 以 看 出 : 出 现 异 常 后 跳 过 了 try 块 中 的 后 续 语 句 , 转 而 
执行 catch 中 的 异常 处 理 语句 ,并 在 最 后 执行 finally 块 中 的 语句 。 
| eT 
OO rr Cr 
出 现 了 异常 


下 
异常 类 型 ，TypeError 
异常 消息 ， 对 象 不 支持 “test” 属 性 或 方法 








异常 处 理 完毕 ! 











图 3-6 使 用 try-catch-finally 处 理 异 常 
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2. 使 用 throw 语句 抛 出 异常 

前 面 的 示例 用 try-catch 结构 处 理 了 系统 内 置 的 异常 类 型 ,有 时 开发 人 员 想 抛 出 自 定义 
的 异常 类 型 ,以 达到 控制 程序 流 并 产生 精确 异常 消息 的 目的 ,这 就 需要 使 用 throw 语句 ,其 
基本 格式 如 下 : 






































throw (exception); 


exception 就 是 要 抛 出 的 异常 值 , 它 可 以 是 字符 串 .整数 .逻辑 值 或 者 对 象 。 
例 3-12 使 用 throw 语句 抛 出 异常 示例 (03-12. html) 。 





<script> 
var x = prompt("Enter a number between 0 and 10:","") 
try{ 
If (x>10) throw "Errl" 
else if (x<0) throw "Err2" 
} catch (err) { 
If (err== "Errl") alert("Error! The value is too high") 
else if (err == "Err2") alert("Error! The value is too low") 
} 


</script > 


该 代码 块 用 于 对 输入 的 一 个 数值 进行 验证 ,车 大 于 10, 则 抛 出 异常 Errl; 若 小 于 0, 则 
抛 出 异常 Err2。 在 catch 块 中 可 以 判断 抛 出 的 异常 ,并 显示 相应 的 提示 信息 。 


3.2.7 事件 处 理 


JavaScript 通过 事件 响应 与 用 户 交 互 。 例 如 , 当 用 户 单 击 一 个 按钮 或 者 在 某 段 文字 上 
移动 鼠标 时 ,就 触发 了 一 个 单 击 事件 或 鼠标 移动 事件 ,通过 对 这 些 事 件 的 响应 ,可 以 完成 特 
定 的 功能 (例如 单 击 按钮 时 弹出 对 话 框 ,将 鼠标 指针 移动 到 文本 上 改变 文本 的 颜色 等 )。 


1. 基本 概念 


JavaScript 是 基于 对 象 的 语言 ,其 基本 特征 就 是 事件 驱动 (Event Driven)。 通 常 把 鼠标 
或 热 键 的 动作 称 为 事件 (Event) ,把 由 事件 引发 的 一 连 串 程序 的 动作 称 为 事件 处 理 , 对 事件 
进行 处 理 的 程序 或 函数 被 称 为 事件 处 理 程序 。 

JavaScript 对 事件 的 处 理 通 常 由 函数 完成 。 通 常 浏览 器 会 默认 定义 一 些 通用 的 事件 处 
理 程序 ,以 便 响应 那些 最 基本 的 事件 。 例 如 , 单 击 超 链接 的 默认 响应 就 是 装 人 并 显示 目标 页 
面 , 单 击 表单 提交 按钮 的 默认 响应 就 是 将 表单 提交 到 服务 器 等 。 虽然 如 此 ,如 果 要 实现 动态 
的 ,具有 交互 功能 的 页 面 ,经 常 要 自 定义 事件 处 理 函 数 ,这 样 可 以 让 页 面 完 成 定制 的 处 理 
功能 。 














2. JavaScript 标准 事件 
JavaScript 就 文档 ,表单 图像. 超 链接 等 对 象 定义 了 若干 个 标准 事件 ,同时 针对 常用 的 
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HTML 标记 定义 了 事件 处 理 属性 , 以便 指定 事件 处 理 代码 。 下 面 简 要 介绍 一 些 常 用 的 
JavaScript 事件 。 
1) onLoad 和 onUnload 事件 
当 用 户 进入 页 面 时 会 触发 onLoad 事件 ; 当 退 出 一 个 页 面 时 会 触发 onUnload 事件 。 若 
在 < body > 标记 的 onLoad 或 onUnload 属性 中 设 定 了 事件 处 理 程序 , 则 页 面 加载 和 退出 时 
会 自动 执行 该 程序 代码 。 请 看 以 下 代码 : 












































< body onLoad = "alert('Welcome to JavaScript World! ');" > 
// 页 面 代码 
</body > 


这 样 每 次 进入 该 页 面 时 都 会 自动 弹出 “Welcome to JavaScript World!1” 消 息 框 。 

2) onClick 事件 

当 用 户 单 击 按钮 或 超 链接 时 就 触发 了 onClick 事件 ,由 onClick 属性 指定 的 事件 处 理 程 
序 将 被 调用 。 例 如 : 





<button name = "button1"” onClick = "btnlClick();"> Click Me</button> 


这 样 当 用 户 单 击 该 按钮 时 会 自动 调用 btn1Click() 函数 。 
3) onFocus .onBlur 和 onChange 事件 
这 3 个 事件 通常 与 输入 元 素 (text、textarea 及 select 等 ) 配 合 使 用 。 当 某 元 素 获得 焦点 





时 触发 onFocus 事件 , 当 元 素 失 去 焦点 时 将 触发 onBlur 事件 , 当 元 素 失 去 焦点 且 内 容 被 改 
变 时 将 触发 onChange 事件 。 这 几 个 事件 经 常 配 合 使 用 来 验证 表单 的 输入 内 容 。 
例如 : 


< input type = "text" size= "30" id = "email" onchange = "checkEmail()" /> 


这 样 当 email 输入 框 中 的 值 改变 时 会 自动 调用 checkEmail 函数 验证 输入 。 

4) onMouseOver 和 onMouseOnut 事件 

当 鼠 标 移 向 某 个 对 象 时 将 触发 onMouseOver 事件 , 当 鼠 标 移 出 某 个 对 象 时 将 触发 
onMouseOnut 事件 ,这 两 个 事件 通常 用 来 为 页 面 对 象 创建 一 些 动态 效果 。 请 看 以 下 代码 














<a href ="#" onmouseover = "alert( 'An onMouseOver event') ;return false"> Click Me</a> 


当 鼠 标 指向 超 链 接 时 会 弹出 一 个 消息 框 。 

5) onSubmit 事件 

当 表 单 提交 时 会 触发 onSubmit 事件 。 用 户 经 常 要 在 表单 提交 之 前 验证 所 有 的 输入 
域 ,以 保证 数据 的 正确 性 ,这 时 就 可 以 使 用 onSubmit 事件 。 

请 看 以 下 代码 : 





< form method = "post" action = "xxx.aspx" onsubmit = "return checkForm()" > 


// 表单 内 容 
</form> 
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当 用 户 单 击 表单 中 的 确认 按钮 时 ,checkForm() 函数 会 被 调用 ,通常 用 于 验证 输入 域 中 
的 值 是 否 有 效 。checkForm() 函 数 的 返回 值 为 true 或 者 false。 如 果 为 true, 则 提交 Form 
表单 ,反之 放弃 提交 。 

关于 JavaScript 事件 驱动 的 更 多 知识 ,读者 可 查阅 相关 书籍 。 


6.3 JavaScript 对 和 象 编程 
A 





























面向 对 象 技 术 是 当前 软件 开发 的 主流 方向 ,JavaScript 也 支持 面向 对 象 编程 。 在 
JavaScript 中 可 以 定义 类 并 创建 对 象 实例 ,也 可 以 使 用 JavaScript 内 建 的 类 和 对 象 ,另外 还 可 
以 访问 浏览 器 及 文档 对 象 模型 中 的 对 象 , 可 以 说 JavaScript 为 对 象 化 编程 提供 了 强大 的 支持 。 

JavaScript 对 象 可 以 是 一 段 文字 、 一 幅 图 片 .一 个 Form 表单 等 ,可 以 从 属性 ,方法 两 个 
方面 来 描述 对 象 。 属 性 反映 对 象 革 些 特定 的 性 质 , 例 如 字符 串 的 长 度 . 图 像 的 长 宽 、 文 本 框 
(Textbox) 里 的 文字 等 ; 方法 指 对 象 可 以 执行 的 行为 (或 者 可 以 完成 的 功能 ) ,例如 String 对 
象 的 toUpperCase() 方 法 可 以 将 所 有 字符 转换 为 大 写 。 如 果 要 引用 对 象 的 某 一 “性 质 ”, 应 
使 用 “< 对 象 名 >. < 性 质 名 >” 这 种 写法 。 

本 节 主 要 介绍 JavaScript 内 置 对 象 的 使 用 以 及 浏览 器 对 象 .文档 对 象 模型 中 的 对 象 的 
使 用 ,关于 自 定义 类 和 对 象 的 方法 请 读者 参阅 相关 书籍 。 


3.3.1 常用 的 JavaScript 对 象 


1. String 对 象 

















字符 串 是 JavaScript 的 一 种 基本 数据 类 型 ,声明 一 个 String 类 型 对 象 的 最 简单 方法 就 
是 直接 赋值 。 例 如 


var s = "JavaScript" 
String 类 只 有 一 个 常用 属性 , 即 length 属性 , 它 返 回 字符 串 的 长 度 。 
String 类 的 常用 方法 如 表 3-2 所 示 。 

表 3-2 String 类 的 常用 方法 





















































方 ” 法 描 述 
charAt() 返回 在 指定 位 置 的 字符 
concat() 连接 字符 串 
indexOf() 检索 字符 串 
lastIndexOf() 从 后 向 前 搜索 字符 串 
match() 找到 一 个 或 多 个 正则 表达 式 的 匹配 
replace() 替换 与 正则 表达 式 匹配 的 子 串 
search() 检索 与 正则 表达 式 相 匹配 的 值 
split() 把 字符 串 分 割 为 字符 串 数 纪 
substr() 从 起 始 索引 号 提取 字符 串 中 指定 数目 的 字符 
toLowerCase() 把 字符 串 转换 为 小 写 
toUpperCase0) 把 字符 串 转换 为 大 写 
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请 看 以 下 代码 : 

var msg = "Hello" + "World" ; // "+ "用 于 字符 串 , 可 以 实现 字符 串 的 拼接 
Var msg = concat("Hello", "World"); // 和 上 一 句 等 效 

document. writeln( msg. length ); // 输出 字符 串 的 长 度 10 

Var idx = msg. indexOf("World"); // 检索 子 串 出 现 的 位 置 , 这 里 为 5 


// 截取 从 第 5 个 字符 往 后 到 第 10 个 字符 之 间 的 所 有 字符 ,为 "World" 
document. writeln( msg. substring(idx,10) ); 
document. writeln(msg. toUpperCase( )); // 输出 为 "HELLOWORLD" 


2. Array 对 象 


Array 为 数组 对 象 , 可 以 在 单个 变量 中 存储 多 个 值 。 
通常 使 用 以 下 方法 创建 和 访问 数组 : 





var mycars = new Array(); // 创建 数组 对 象 ,可 以 不 用 指定 元 素 个 数 

mycars[0] = "BMW"; // 为 数组 元 素 赋值 

mycars[1] = "AUDI"; 

var yourcars = new Array(3); // 创建 数组 对 象 并 指定 元 素 个 数 

var hiscars = new Array("Buick", "Benz","Volvo"); // 创建 数组 对 象 并 同时 赋值 

for (x in mycars) { // 遍历 数组 元 素 ,x 能 得 到 元 素 的 下 标 
document. write(mycars[x] + "<br />") // 输出 数组 元 素 


} 
同样 数组 对 象 也 有 length 属性 ,用 于 设置 或 返回 数组 中 的 元 素 个 数 。 
数组 的 常用 方法 见 表 3-3。 

表 3-3 数组 的 常用 方法 


























方法 描述 
concat() 连接 两 个 或 更 多 的 数组 并 返回 结果 

join() 把 数组 的 所 有 元 素 放 入 一 个 字符 串 ,元 素 通 过 指定 的 分 隔 符 进行 分 隔 
sort() 对 数组 的 元 素 进 行 排序 

reverse( ) 颠倒 数组 中 元 素 的 顺序 

shift() 删除 并 返回 数组 的 第 一 个 元 素 

pop() 删除 并 返回 数组 的 最 后 一 个 元 素 

例如 : 


Var arrl = new Array("Tom", "Jerry") 

var arr2 = new Array("Bingo") 

var arr = arrl.concat(arr2); // 连接 两 个 数组 ,生成 新 的 数组 

document. write(arr. join(" | ")); // 将 arr 中 的 元 素 拼接 成 字符 串 , 使 用 | 分 隔 
arr = new Array(7, 5, 3, 8, 6); 

document. write(arr. sort( )); // 对 数组 元 素 进行 排序 


3. Date 对 象 

















Date 对 象 用 于 表示 日 期 和 时 间 , 通 过 它 可 以 进行 一 系列 与 日 期 \ 时 间 有 关 的 操作 。 
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户 可 以 使 用 以 下 方法 创建 Date 对 象 ,并 为 其 赋 日 期 和 时 间 值 。 














var d = new Date(); // 创建 日 期 对 象 
d. setFullYear(2011,11,1); // 赋 日 期 值 
d. setHours(9, 58, 58, 0); // 赋 时 间 值 


document. write(d. getYear()+ "一 "+ d.getMonth() + "—" + d.getDate()); // 输出 日 期 
document.write("<br>"” + d.toLocaleDateString());  // 显示 为 2011 年 12 月 1 日 星期 四 


需要 注意 的 是 , 当 为 Date 对 象 设置 日 期 时 月 份 可 接收 的 数值 为 0 一 11, 代 表 1 一 12 月 ， 
所 以 这 里 设置 月 份 值 为 11 时 实际 上 是 作为 12 月 处 理 。 
Date 对 象 的 常用 方法 如 表 3-4 所 示 。 
表 3-4 Date 对 象 的 常用 方法 
























































方法 描 述 
Date() 返回 当日 的 日 期 和 时 间 
getDate() 从 Date 对 象 返回 一 个 月 中 的 某 一 天 (1 一 31) 
getDay() 从 Date 对 象 返回 一 周 中 的 某 一 天 (0 一 6) 
getMonth() 从 Date 对 象 返回 月 份 (0 一 11) 
getFullYear() 从 Date 对 象 以 4 位 数字 返回 年 份 
getHours() 返回 Date 对 象 的 小 时 (0 一 23) 
getMinutes() 返回 Date 对 象 的 分 钟 (0 一 59) 
getSeconds() 返回 Date 对 象 的 秒 数 (0 一 59) 
setDate() 设置 Date 对 象 中 月 的 某 一 天 (1 一 31) 
setMonth() 设置 Date 对 象 中 的 月 份 (0 一 11) 
setFullYear() 设置 Date 对 象 中 的 年 份 (4 位 数字 ) 
setHours() 设置 Date 对 象 中 的 小 时 (0 一 23) 
setMinutes() 设置 Date 对 象 中 的 分 钟 (0 一 59) 
setSeconds() 设置 Date 对 象 中 的 秒 钟 (0 一 59) 
setTime() 以 毫秒 设置 Date 对 象 
若 只 是 创建 Date 对 象 而 不 为 其 赋值 ,可 从 中 获得 当前 的 日 期 和 时 间 。 
例 3-13 Date 对 象 的 使 用 (时 钟 的 显示 ,03-13. html) 。 


< html > 
<head > 
<script> 
function startTime() { 
var d = new Date(); 
var h = d.getHours(); // 获取 当前 的 时 ,分 . 秒 
varm = d.getMinutes(); 
vars = d.getSeconds( ); 
m = checkTime(m); // 若 分 、 秒 的 值 小 于 10, 则 在 前 面 补 0 
s = checkTime(s); 
// 在 div 上 显示 当前 时 间 
document. getElementById( 'clock'). innerHTML = "本 地 时 间 : ”+ h+":"+m+":"+s; 
setTimeout( 'startTime()', 500); // 设置 500 毫秒 后 再 次 调用 以 更 新 时 间 
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function checkTime(i) { 
Tf (i<10) On 1; 


return i 
h 
</script > 
</head > 


<body onload = "startTime( )"> 


<div id= "clock" /> 


</body > 
</html > 


在 页 面 中 定义 了 id 属性 为 clock” 的 div 对 象 ,月 
自动 启动 startTimer( ) 函 数 创建 Date 对 象 , 并 获得 时 、 分 、 秒 ,拼接 起 来 显示 在 div 中 。 值 得 
一 提 的 是 ,startTime() 函 数 的 最 后 调用 了 setTimeout() 函 数 , 设 置 在 500 毫秒 后 再 次 调 
当前 函数 ,这 样 显 示 时 间 就 会 不 断 被 刷新 ,形成 电子 


4. Math 对 象 


Math 对 象 用 于 执行 一 些 数学 计算 任务 ,该 对 象 不 需 创 建 , 可 以 直接 使 用 。 





才 钟 的 效果 。 


日 于 显示 一 个 数字 时 钟 。 


当 页 面 加 载 有 H 


时 

















JavaScript 提供 了 8 个 可 被 Math 对 象 访问 的 算术 值 ,例如 自然 对 数 e、 圆 周 率 x 等 , 通 
过 属性 访问 它们 ,例如 Math. E、Math. PI。 
另外 ,调用 Math 对 象 的 方法 可 以 实现 一 些 常 用 的 数学 计算 ,例如 : 


var pi val = Math.PI; 


var sin val = Math. sin(pi val); 

var sqrt val = Math. sqrt(5); 

var rnd_val = Math. round(sqrt_val); 
document. write("PI=" + pival + "<br/>"); 


document. write("sin(PI) 


=" + sinval+ 


// 获得 PI 值 
// 计算 sin(PI) 


// 求 5 的 平方 根 
// 对 5 的 平方 根 并 取 整 


"<br/>"); 


document. write("sqrt(5) =" + sqrt val + "<br/>"); 
document. write("round(sqrt(5)) =" + rnd val + "<br/>"); 


3.3.2 浏览 器 对 象 模型 


浏览 器 作为 JavaScript 的 运行 环境 提供 了 一 系列 的 宿主 对 象 ,通过 这 些 对 象 可 以 获取 


浏览 器 的 信息 ,并 控制 浏览 器 执行 指定 的 操作 。 浏 览 器 对 象 模型 (Browser Object Model， 


BOMD) 结 构 如 图 3-7 所 示 。 





Window 








frames 











[ location | | document history | 








navigator 








screen 








可 以 看 出 ,window 是 


图 3-7 常用 的 BOM 对 象 


个 顶层 的 对 象 ， 














问 到 其 他 对 象 ; document 是 最 了 





E 要 的 一 个 对 





其 他 对 象 都 包含 在 window 内 部 ,通过 它 可 以 访 
象 ,包含 了 很 多 与 HTML 元 素 相关 的 成 员 ,使 
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它 可 以 控制 加 载 到 浏览 器 中 的 HTML 文档 ,并 且 可 以 实现 动态 控制 。 
1. window 对 象 


window 对 象 表示 浏览 器 中 打开 的 窗口 。 如 果 文 档 包含 框 架 (frame 或 iframe) ,那么 浏 
览 器 会 为 HTML 文档 创建 一 个 window 对 象 ,并 为 每 个 框架 创建 一 个 额外 的 window 
对 象 。 

window 作为 顶层 对 象 ,在 访问 它 的 属性 和 方法 时 一 般 无 须 指 定 对 象 名 ,例如 下 面 两 个 
调用 是 完全 等 价 的 : 





window. alert( " 欢迎 进入 JavaScript!") ; 
alert( " 欢迎 进入 JavaScript!") ; 








使 用 window 提供 的 alert .confirm prompt 等 方法 可 以 完成 基本 的 浏览 器 交互 ,由 于 
这 些 内 容 在 前 面 已 经 讲 过 ,这 里 不 再 重复 讲解 。 
使 用 window 对 象 的 open 方法 可 以 打开 一 个 新 的 窗口 ,语法 格式 如 下 : 




















window. open( [sURL] [, sname] [, sfeatures]); 


说 明 : 

。 SURL: 打开 网 页 的 URL 地 址 , 若 该 参数 省 略 则 打开 空白 网 页 。 

。 sname: 显示 网 页 窗口 的 名 称 ,可 以 使 用 _top、blank、parent、_self 等 内 建 名 称 , 也 
可 以 自 定义 一 个 名 称 ,以 后 可 以 使 用 该 名 称 引 用 该 窗口 。 

。 sfeatures: 指定 被 打开 窗口 的 特征 ,例如 窗口 的 宽度 、 高 度 、 是 否 需要 菜单 栏 等 , 若 要 
打开 一 个 普通 窗口 可 以 忽略 该 参数 。 

例如 下 面 的 代码 将 打开 一 个 300X200 的 空白 窗口 ,并 且 没 有 菜单 栏 和 工具 栏 。 


window. open( " ", "_blank", "width= 300, height = 200, menubar = no, toolbar = no"); 
又 如 下 面 的 代码 将 在 顶层 框架 中 打开 163 邮箱 首页 。 


window. open( " mail.163.com", "_top" ) ; 











调用 window 对 象 的 close 方法 可 以 关闭 一 个 窗口 ,代码 如 下 : 





window. close() ; 





打开 一 个 窗口 后 可 以 设置 或 移动 窗口 的 位 置 ,例如 : 
window. moveTo( 300, 200 ); // 绝对 定位 方法 ,以 屏幕 的 左上 角 为 原点 
或 者 


window. moveBy( -10, -10); // 相对 定位 方法 ,以 当前 窗口 的 左上 角 为 原点 
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moveTo() 方 法 以 屏幕 的 左上 角 为 坐标 原点 ,将 窗口 移动 到 指定 位 罗 , 两 个 偏 移 量 都 必 





须 为 正 ; moveBy() 方 法 则 以 当前 窗口 的 左上 角 为 坐标 原点 ,实现 相对 偏 移 , 若 偏 移 量 为 正 ， 








则 向 右 、 下 方向 移动 ,车 为 负 , 则 向 左 、 上 方向 移动 。 

















使 用 resizeTo() 方 法 可 以 调整 窗口 








var w = window. screen.availwidth/2; 


var h = window. screen.availheight /2 ; 


// 将 窗口 的 宽度 和 高 度 调整 到 屏幕 宽 、 高 的 一 半 


window. resizeTo( w, h ) ; 


的 大 小 ,例如 : 


在 JavaScript 中 有 时 和 希望 窗 体 加 载 后 延迟 一 段 时 间 ,然后 执行 某 项 操作 ,或 者 以 指定 的 
时 间 间 隔 反复 调用 某 函 数 , 这 可 以 使 用 window 对 象 的 SetTimeonut 方法 来 实现 ,例如 : 


window. setTimeout( myfunction, 1000 ) ; 


这 将 在 1 秒 钟 后 自动 调用 myfunction 方法。 如 果 在 myfunction 方法 中 使 用 上 面 的 语 


句 , 则 会 形成 每 秒 一 次 反复 调用 的 效果 。 


除 上 面 介绍 的 方法 外 ,在 程序 中 还 经 常 访问 window 对 象 的 一 些 属性 ,如 表 3-5 所 示 。 
表 3-5 window 对 象 的 常用 属性 


属 性 


描 述 





document screen,history ,location .navigator 等 


几 个 下 级 对 象 





集合 对 象 ,代表 当前 窗口 中 的 框架 集 , 从 而 可 以 获取 并 























操纵 所 有 的 子 窗口 
length 窗口 中 的 框架 个 数 
opener 代表 使 用 open 方法 打开 当前 窗口 的 窗口 
self 代表 当前 窗口 
top 代表 所 有 框架 中 的 顶层 窗口 
Status 代表 窗口 的 状态 栏 
XMLHttpRequest 和 服务 器 端 异步 交互 的 对 象 
例如 : 


window. location. href = "http://cn.yahoo. com"; 


window. status = "欢迎 使 用 本 系统 "; 


2. location 对 象 


// 当前 窗口 跳 转 到 Yahoo 主页 
// 在 窗 体 的 状态 栏 中 显示 欢迎 信息 


location 对 象 描述 的 是 浏览 器 所 打开 网 页 的 地 址 。 如 果 要 表示 当前 窗口 地 址 ,直接 使 




















于 


格式 。 例 如 : 














location 或 window. location 即 可 ; 车 要 表示 指定 窗口 的 地 址 , 则 使 用 “窗口 名 . location” 





var newwin = window.open("http://localhost/login. htm", "_blank") ; 


document. write( newwin. location ) ; 


使 




















location 对 象 的 
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属性 可 以 获取 详细 的 地 址 信息 ,例如 : 


document. write(" 当 前 位 置 : " + location.href + "<br/>"); 


document. write(" 主 机 名 称 : " 


document, write(" 主 机 端口 : " 


location. host + "<br/>"); 


location. port + "<br/>"); 


二 
document. write(" 请 求 路 径 : " + location. pathname + "<br/>"); 
涡 


document. write(" 请 求 字 符 串 : 


+ location. search + "<br/>"); 


location 对 象 的 常用 方法 如 表 3-6 所 示 。 


表 3-6 location 对 象 的 常用 方法 














方 ”法 描述 

assign 加 载 一 个 新 的 HTML 文档 

reload 刷新 当前 网 页 ,相当 于 单 击 浏览 器 的 “刷新 "按钮 
Replace 打开 一 个 新 的 URL, 并 取代 历史 中 的 URL 





这 3 个 方法 的 使 用 格式 非常 简单 ,例如 


location.assign("http://localhost/login. aspx" ); 
location. replace( "http://localhost/index. html1"); 
location. reload( ); 


3. history 对 象 


history 对 象 代 表 了 浏览 器 的 浏览 历史 。 鉴 于 安全 性 考虑 ,该 对 象 的 使 用 受到 了 很 多 限 
制 ,目前 只 能 使 用 back、forward 和 go 等 几 个 方法 ,格式 如 下 : 


history. back( n ) 
history. forward( ) 
history. go( location) 


// 浏览 器 后 退 n 步 
// 浏览 器 前 进 1 步 
// 浏览 器 跳 转 到 指定 的 网 页 


在 go 方法 中 location 可 以 是 一 个 URL 字符 串 ,也 可 以 是 一 个 整数 。 若 是 字符 串 , 则 代 
表 了 历史 列表 中 的 某 个 URL; 若是 整数 , 则 代表 前 进 ( 正 数 ) 或 后 退 ( 负 数 ) 的 步 数 ; 若 
location 为 0, 则 刷新 当前 页 面 ,等 同 于 location. reload( ) 调 用 。 


3.3.3 文档 对 象 模型 


当 网 页 被 加 载 时 ,浏览 器 会 创建 页 面 的 文档 对 象 模型 (Document Object Model， 
DOM) ,这 通常 表现 为 树 形 的 结构 形式 ,如 图 3-8 所 示 。 
有 了 DOM ,JavaScript 就 获得 了 足够 的 能 力 来 创建 动态 的 HTML, 例 如: 


。 动态 地 创建 或 
。 动态 地 改变 页 面 ] 
。 动态 地 改变 页 面 


























jj 除 页 面 中 的 HTML 元 素 。 
h 任 意 HTML 元 素 的 内 容 或 属性 。 
Ph 所 有 HTML 元 素 的 CSS 样式 。 














。 对 页 面 中 的 所 有 事件 作出 适当 的 响应 。 
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图 3-8 DOM 树 实例 


1. 在 DOM 中 查找 HTML 元 素 


在 JavaScript 中 为 了 操作 某 个 HTML 元 素 , 必 须 先 在 DOM 树 中 定位 到 该 元 素 。 通 常 
使 用 页 面 元 素 的 id 或 者 name 属性 进行 定位 。 

在 DOM 中 查找 HTML 元 素 的 最 简单 的 方法 是 调用 document 对 象 的 getElementByld 方 
法 ,并 传递 元 素 的 id 属性 。 例 如 查找 id 属性 为 intro 的 元 素 : 


var x = document.getElementById("intro"); 


如 果 在 文档 中 能 够 找到 该 元 素 , 则 返回 该 元 素 并 以 对 象 的 形式 保存 在 变量 x 中 ; 如 果 
未 找到 , 则 工 将 包含 null 值 。 
调用 document 对 象 的 getElementsByName 方法 可 以 按 名 称 查 找 HTML 元 素 , 例 如 ， 


var Y = document.getElementsBYName("tbxname" ) ; 


这 将 在 整个 文档 中 查找 name 属性 为 tbxname 的 元 素 , 并 将 结果 保存 到 变量 y 中 。 需 
要 注意 的 是 ,根据 id 检索 只 会 返回 一 个 元 素 , 而 根据 name 检索 通常 会 返回 一 组 元 素 ( 例 如 
表单 中 的 多 个 单 选 按钮 会 使 用 同一 个 名 称 ,这 样 按 name 检索 会 找到 这 一 组 对 象 ) ,所 以 结 
果 会 保存 到 数组 中 。 请 看 以 下 示例 : 

例 3-14 按 name 属性 检索 页 面 元 素 (03-14. html) 。 


<html> 
<head> 
<script> 
function getElements() { 
var x = document. getElementsByName( "myInput" ); 
alert(x. length); 
</script> 
</head> 
<body> 
< input name = "myInput" type = "text" size= "20" /><br /> 
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< input name = "myInput" type = "text" size= "20" /><br /> 

< input type = "button" onclick = "getElements()" value = " 共 多 少 个 同名 输入 框 ?" /> 
</body> 
</html > 











当 单 击 按钮 时 执行 按 name 属性 查找 ,得 到 由 两 个 文本 输入 框 name 一 "myInput "组 成 
的 数组 ,再 调用 数组 的 length 属性 得 到 元 素数 量 。 
除了 以 上 两 种 检索 方式 外 还 可 以 按照 元 素 类 别 ( 即 HTML 标签 名 ) 进 行 检索 ,例如 : 





























var x = document.getElementById("main"); 
Var y = x.getElementsByTagName("p"); 


在 该 例 中 首先 通过 id 找到 某 一 个 元 素 ,然后 在 该 元 素 内 部 检索 所 有 的 段落 元 素 。 
2. 动态 地 改变 元 素 内 容 
当 检 索 到 某 个 元 素 后 可 以 通过 其 innerHTML 属性 获取 或 设置 元 素 内 容 , 例 如 ， 


<hl id = "header"> 01d Header </hl > 

<script> 
var element = document.getElementById("header"); 
element. innerHTML = "New Header"; 

</script > 


一 级 标题 元 素 的 内 容 原先 为 Old Header, 随 后 在 JavaScript 中 定位 到 该 元 素 , 并 将 其 内 
容重 新 设置 为 New Header。 

用 户 也 可 以 在 JavaScript 中 访问 对 象 的 属性 ,实现 更 多 的 动态 效果 。 请 看 以 下 示例 ， 

例 3-15 动态 地 改变 页 面 上 的 图 片 (03-15. html) 。 


<html> 
<body> 
<inmg id= "image" src= "smiley. gif"> 
<script> 
document. getElementById("image"). src = "landscape. jpg"; 
</script > 
</body > 
</html > 

















开始 时 img 元 素 显 示 的 图 片 为 smiley. gif, 随 后 在 JavaScript 中 定位 该 对 象 ,并 更 改 其 
src 属性 ,这 样 将 显示 另 一 张 图 片 landscape. jpg。 


3. 动态 地 改变 元 素 样式 
如 果 要 动态 地 改变 HTML 元 素 的 显示 样式 ,可 以 使 用 以 下 语法 : 














document .getElementById(id). style.property = "属性 值 " 
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例如 : 


<p id= "p2"> Hello World!</p> 
< script > document. getElementById("p2"). style.color = "blue"; </script> 














在 页 面 中 有 时 需要 隐藏 或 显示 某 个 对 象 ,这 可 以 通过 设置 visibility 样式 属性 来 实现 ， 
请 看 以 下 示例 : 
例 3-16 显示 和 隐藏 页 面 元 素 (03-16. html) 。 


<html> 
<body> 
<p id="p1"> 这 是 一 段 文本 .</p> 
< input type = "button" value = "隐藏 文本 " 
onclick = "document. getElementById( 'p1'). style.visibility = 'hidden'" /> 
<input type = "button" value = "显示 文本 " 
onclick = "document. getElementById( 'p1'). style.visibility = 'visible'" /> 
</body > 
</html > 


关于 更 多 的 DOM 样式 设置 ,请 读者 参阅 HTMI DOM Style 对 象 参考 手册 。 


4. 对 DOM 事件 作出 响应 


在 设计 HTML 页 面 时 ,针对 HTML 元 素 可 以 捕获 鼠标 单 击 事件 .鼠标 移动 事件 .内 容 
改变 事件 等 一 系列 事件 ,并 为 每 个 事件 编写 处 理 函 数 。 借 助 DOM 技术 还 可 以 将 一 个 事件 
处 理 函 数 动态 地 分 配给 某 个 HTML 元 素 的 相应 事件 。 请 看 以 下 示例 。 

例 3-17 为 按钮 动态 地 分 配 事 件 处 理 函数 (03-17. html) 。 


<htm]l > 
<body> 
<p> 动 态 地 分 配 事件 处 理 函 数 示 例 </p > 
<button id = "myBtn"> 单 击 这 里 </button > 
<script> 
function displayDate() { 
document. getElementById( "demo" ) . innerHTML = Date(); 
! 
document. getElementById( "myBtn").onclick = function(){ displayDate( ) }; 
</script > 
<p id= "demo"></p> 
</body > 
</html > 


该 例 在 声明 myBtn 按钮 时 ,并 没有 为 其 指定 单 击 事件 处 理 程序 ,所 以 通常 情况 下 不 会 
响应 鼠标 单 击 事 件 。 在 后 面 的 JavaScript 代码 中 首先 定义 了 displayDate() 函数 ,然后 根据 
id 找到 myBtn 按钮 ,并 将 该 函数 动态 地 挂 接 到 该 按钮 的 单 击 事件 上 ,这 样 可 以 更 灵活 地 控 
制 对 象 的 事件 处 理 方法 。 
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5. 动态 地 添加 或 删除 元 素 


借助 JavaScript 和 DOM 技术 还 可 以 向 HTML 文档 中 动态 地 添加 元 素 ,或 者 删除 已 存 
在 的 元 素 。 请 看 以 下 示例 。 
例 3-18 ”向 页 面 中 动态 地 添加 HTML 元 素 (03-18. html) 。 


<html > 

<body > 

<div id= "div1"> 
<p id= "pl"> 这 是 一 个 段落 .</p> 

</div> 

<script> 
Var para = document.createElement("p"); 
var node = document.createTextNode(" 这 是 新 段落 "); 
para, appendChild( node); 
var element = document. getElementById("div1"); 
element. appendChild(para); 

</script > 

</body > 

</html > 


在 该 页 面 中 设置 了 一 个 div 元 素 作 为 容器 ,并 放置 了 一 个 段落 p1。 在 JavaScript 代码 
中 ,首先 调用 document. createElement("p") 动 态 地 创建 一 个 段落 对 象 para( 相 当 于 HTML 
中 的 < p > 和 </p > 标签 对 ) ,然后 调用 document. createTextNode() 创 建 一 个 文本 结 点 node， 
接着 通过 para. appendChild(node) 将 文本 结 点 加 入 到 新 创建 的 段落 对 象 中 ; 下 一 步 通过 
getElementById() 找 到 div 元 素 , 并 调用 其 appendChild() 方 法 将 新 段落 对 象 添加 到 div 对 
象 之 中 ,这 样 div 元 素 内 部 就 包含 了 两 个 段落 。 

可 以 看 出 ,向 页 面 添加 新 元 素 的 一 般 步骤 如 下 : 

(1) 创建 新 元 素 。 

(2) 检索 要 将 其 加 入 的 父 元 素 。 

(3) 在 父 元 素 之 中 加 入 新 元 素 。 

如 果 要 删除 页 面 中 已 经 存在 的 元 素 , 需 要 先 检索 到 该 元 素 , 然 后 在 其 父 元 素 上 调用 
removeChild 方法 进行 删除 。 例 如 : 


<div id= "divl"> 
<p id= "pl"> 这 是 第 一 个 段落 .</p> 
<p id= "p2"> 这 是 第 二 个 段落 .</p> 

</div> 

<script> 
Var parent = document. getElementById("div1"); 
var child = document. getElementById("p1"); 
Parent. removeChild( child); 

</script > 


在 该 例 的 divl 中 最 初 放 置 了 两 个 段落 ; 通过 id 检索 分 别 定位 了 pl 对 象 及 其 父 对 象 
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divl ,然后 在 divl 上 调用 removeChild() 方 法 将 pl 对 象 删除 。 











户 可 以 使 用 以 下 方式 来 简化 代码 : 

















var child = document. getElementById("p1"); 
child. parentNode. removeChild( child); 














在 这 里 只 需要 定位 到 要 删除 的 子 元 素 ,然后 使 用 其 parentNode 属性 找到 父 元 素 , 完 成 


结 点 的 删除 操作 。 


@.4 jQuery 框架 


jQuery 是 精简 、 高 效 , 强 大 的 JavaScript 库 , 它 提供 了 一 套 易 用 且 兼 容 各 种 浏览 器 的 


API, 使 得 诸如 遍历 和 操作 HTML 文档 .事件 处 理 ,动画 和 特效 以 及 AJAX 编程 变 得 非常 容 
易 。 由 于 功能 丰富 .扩展 性 强 ,jQuery 彻底 改变 了 JavaScript 的 编程 方式 。 


3.4.1 jQuery 基础 


首先 通过 一 段 代 码 来 认识 jQuery。 
例 3-19 创建 一 个 HTML 页 面 ,并 利用 jQuery 代码 实现 简单 的 页 面 特效 (03-19. html) 。 


<!doctype htm]l > 
<html > 
<head > 
<title> jQuery 练习 </title > 
<script src = "https://code. jquery.com/jquery- 3.1.1.min. js"> </script > 
<script> 
$ (document). ready(function( ){ 
$ ("p").click(function(){ $ (this).hide(); }); 
}); 
</script > 
</head> 
<body> 
<p> 如 果 您 点 击 我 ,我 会 消失 .</p> 
<p> 点 击 我 ,我 会 消失 .</p> 
<p> 也 要 点 击 我 哦 .</p> 
</body > 
</html > 


浏览 该 页 面 ,效果 如 图 3-9 所 示 。 当 单 击 任何 一 行文 字 内 容 时 该 行内 容 会 自动 消失 。 
为 了 使 用 jQuery, 需 要 首先 在 页 面 中 引入 jQuery 库 。jQuery 库 是 一 个 .js 文件 ,可 以 


















































直接 下 载 到 本 地 ,然后 引入 到 HTML 页 面 ,也 可 以 从 官方 提供 的 URL 引用 。 本 例 直接 从 
jQuery 官方 网 站 引入 jQuery 3. 1. 1 库 , 这 是 编写 本 书 时 官方 提供 的 最 新 库 。 





且 



































在 该 段 代 码 中 通过 jQuery 函数 可 以 返回 一 个 对 象 的 集合 (基于 DOM 或 HTML 字符 





串 ), 然 后 就 可 以 访问 该 集合 中 所 有 元 素 的 属性 或 者 方法 。 例 如 : 
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如 果 您 点 击 我 ， 我 会 消失 。 
点 击 我 ， 我 会 消失 。 
也 要 点 击 我 哦 。 











图 3-9 使 用 jQuery 实现 简单 的 页 面 特效 


jQuery("p"). hide() // 返回 页 面 中 所 有 的 段落 标签 ,并 对 其 调用 hide 方法 
为 了 简化 代码 ,通常 用 $ 符号 来 替代 jQuery, 两 者 完全 等 价 。 例 如 : 
$ ("p").hide() // 返回 页 面 中 所 有 的 段落 标签 ,并 对 其 调用 hide 方法 


可 以 看 出 ,jQuery 操作 HTML 元 素 的 基本 方法 是 : 先 选取 一 个 HTML 元 素 , 然 后 对 
其 执行 指定 的 操作 。 其 语法 格式 如 下 : 


$ (selector). action() 


说 明 : selector 为 选择 器 ,用 于 选择 一 个 或 一 组 对 象 ; action 为 方法 名 ,用 于 指定 要 在 所 
选 对 象 上 执行 的 操作 。 例 如 : 


$ (this). hide( ); // 选取 当前 元 素 ,并 对 其 调用 hide 方 法 
$ ("p").hide() // 隐藏 所 有 的 段落 元 素 ,这 里 使 用 了 HTML 标签 选择 器 
$ (",.test"). hide() // 隐藏 所 有 class = "test" 的 元 素 , 这 里 使 用 了 类 选择 器 


$("#test"). hide() // 隐藏 id= "test" 的 元 素 ,这 里 使 用 了 ID 选择 器 


jQuery 选择 器 的 语法 和 CSS 基本 相同 , 除 3 种 基本 的 选择 器 (标签 选择 器 、 类 选择 器 以 
及 ID 选择 器 ) 外 ,还 可 以 使 用 复合 选择 器 (后 代 选 择 器 、 交 集 选择 器 .并 集 选 择 器 ) 。 例 如 : 





$("p. intro") // 选择 所 有 class = "intro" 的 <p > 元 素 
$ ("ul li:first") // 选择 所 有 < ul > 中 的 第 一 个 <1i> 元 素 
$ ("div#intro .head") // 选择 id = "intro" 的 < div> 元 素 中 的 所 有 class = "head" 的 元 素 


jQuery 还 可 以 使 用 XPath 表达 式 选择 带 有 指定 属性 的 元 素 ,例如 : 


$ ("[href]") // 选取 所 有 带 有 href 属性 的 元 素 

$ ("[href = ' 井 "]") // 选取 所 有 带 有 href 属性 且 其 值 等 于 "#" 的 元 素 

$ ("[href!= ' 井 ']") // 选取 所 有 带 有 href 属性 且 其 值 不 等 于 "并 ”的 元 素 
$ ("[href$ ='.jpg']") // 选取 所 有 带 href 属性 且 其 值 以 ". jpg" 结 尾 的 元 素 


在 传统 的 JavaScript 编程 中 ,为 了 保证 自己 的 代码 能 够 在 浏览 器 中 加 载 文档 完成 后 才 
运行 ,经 常 需要 捕获 window. onload 事件 ,并 嵌入 自己 的 处 理 代码 。 例 如 : 
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window. onload = function() { 
alert( "welcome" ); 


}; 


但 是 如 果 页 面 中 包含 很 多 图 片 ,那么 只 有 当 所 有 图 片 都 下 载 完 后 代码 才 可 以 执行 ,这 显 
然 是 不 合理 的 。 为 了 尽早 执行 代码 ,jQuery 使 用 文档 对 象 上 的 ready 事件 ,形式 如 下 : 





$ ( document ). ready(function() { 
// 代码 
)); 


当 捕获 到 ready 事件 时 为 它 传递 了 一 个 匿名 函数 ,大 括号 {) 中 的 代码 就 是 要 执行 的 函 
数 体 。 通 常会 在 ready 事件 函数 中 完成 页 面 的 初始 化 ,比如 实现 按钮 、 超 链接 等 元 素 的 事件 
绑 定 。 例 如 : 


$ (document). ready(function( ){ 
$ ("p").click(function(){ 
$ (this), hide(); 
D); 
D); 


在 ready 事件 处 理 函数 中 ,为 所 有 的 段落 标签 注册 了 单 击 事件 处 理 函数 ,这 里 同样 使 用 
了 匿名 函数 ,在 函数 体 中 使 用 $ this 选择 当前 对 象 ,再 调用 hide 方法 将 其 隐藏 。 

在 事件 驱动 编程 中 ,回调 函数 (Callback) 是 当 捕 获 到 某 事件 发 生 时 自动 调用 的 事件 处 
理 函 数 。 在 程序 运行 时 ,JavaScript 允许 将 回调 函数 作为 一 个 函数 的 参数 进行 传递 , 当 其 父 
函数 执行 完成 后 自动 执行 回调 函数 。 

在 使 用 回调 函数 时 ,应 注意 区 分 下 面 两 种 情况 : 

(1) 当 回 调 函 数 没 有 参数 时 ,可 以 直接 通过 函数 名 传递 ,例如 : 





$ .get( "myhtmlpage. html", myCallBack ); 


这 里 调用 了 get 方法 来 请 求 myhtmlpage. html 页 面 , 当 该 页 面 下 载 完 成 后 ,自动 回调 
myCallBack 函数 。 由 于 回调 函数 不 带 任何 参数 ,所 以 通过 函数 名 即 可 调用 。 
(2) 当 回 调 函 数 带 有 参数 时 ,需要 使 用 一 个 匿名 函数 来 包装 回调 代码 ,例如 : 








$ .get( "myhtmlpage. html", myCallBack( paraml，Pparam2 ) ) // 错误 的 回调 形式 











该 行 代码 无 法 正确 执行 ,因为 系统 会 立刻 调用 myCallBack 函数 ,并 将 其 返回 值 作为 
Get 请 求 的 第 二 个 参数 ,这 与 目标 完全 不 同 。 正 确 的 调用 方法 如 下 : 














$ .get( "myhtmlpage.html", function() { ”// 正确 的 回调 形式 
myCallBack( paraml, param2 ) ; 
}); 





当 get 方法 完成 对 myhtmlpage. html 页 面 的 下 载 后 会 自动 执行 一 个 匿名 函数 ,进而 在 
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匿名 函数 中 调用 myCallBack 回调 函数 。 
3.4.2 使 用 jQuery 操作 HTML 元 素 


使 用 jQuery 可 以 通过 文档 对 象 模型 (DOM) 来 操作 HTML 元 素 和 属性 ,非常 方便 地 获 
取 和 设置 各 种 HTML 元 素 的 内 容 和 属性 、 添 加 或 删除 HTML 元 素 .设置 HTML 元 素 的 样 


1. 获取 或 设置 HTML 元 素 的 内 容 


使 用 以 下 3 个 jQuery 方法 可 以 获取 或 设置 HTML 元 素 的 内 容 。 
。 text(): 设置 或 返回 HTML 元 素 的 文本 内 容 。 

。 html() : 设置 或 返回 HTML 元 素 的 内 容 ( 包 括 HTML 标记 )。 
。 val() ; 设置 或 返回 表单 字段 的 值 。 

例 3-20 使 用 jQuery 获取 HTML 元 素 的 内 容 (03-20. html) 。 












































<!doctype html > 
<html > 
<head > 
<meta charset = "utf -8"> 
<title> 获 取 HTML 元 素 的 内 容 </title> 
< script src = "https://code. jquery. com/jquery— 3.1.1.min. js"> </script> 
<script> 
$ (document). ready(function( ){ 
$ ("#btn1").click(function( ){ 
alert("Text: ”+ $("#test").text()); 
}); 
$ ("#btn2").click(function(){ 
alert("HIML: " + $ ("#test").html()); 
}D); 
$ ("#btn3").click(function(){ 
alert("Val: " + $("#test2").val()); 
DD); 
]) 
</script> 
</head > 
<body > 
<p id= "test"> 这 是 段落 中 的 <b> 粗 体 </b> 文 本 .</p> 
<button id= "btn1"> 显 示 文 本 </button> 
<button id= "btn2"> 显 示 HTML </button> 
<p> 姓 名 : < input type = "text”id= "test2" value = " 米 老 鼠 "></p> 
<button id= "btn3"> 显 示 值 </button > 
</body> 
</html > 





浏览 该 页 面 ,效果 如 图 3-10 所 示 。 单 击 页 面 上 的 3 个 按钮 ,分 别 弹 出 如 图 3-11(a)、 
图 3-11(b)、 图 3-11(c) 所 示 的 对 话 框 。 
可 以 看 出 这 3 种 方法 都 不 带 参数 ,能 够 获得 所 选 对 象 的 内 容 。 若 要 设置 所 选 对 象 的 内 
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1 
【< 


这 是 段落 中 的 粗 体 文本 。 





姓名 ， 

















图 3-10 使 用 jQuery 获取 HTML 元 素 的 内 容 


A HM mete <b /b> 


Cw] 





(a) 单 击 * 显 示 文 本 ”按钮 (b) 单 击 * 显 示 HTML "按钮 (9) 单 击 * 显 示 值 "按钮 
图 3-11 单 击 图 3-10 中 的 各 按钮 后 的 结果 


容 , 只 需 将 设置 值 作为 参数 传人 即 可 ,例如 : 
$ ("p").html("Hello <b> world </b>!"); 
上 面 代码 的 作用 是 将 所 有 段落 元 素 的 内 容 都 设置 为 指定 的 HTML 文本 。 
2. 获取 或 设置 HTML 元 素 的 属性 











在 HTML 元 素 上 调用 attr 方法 可 以 获取 或 设置 元 素 的 属性 值 ,其 基本 用 法 如 下 。 
。 $ (selector). attrCattribute) : 获取 所 选 对 象 指 定 属性 的 值 。 


。 $$ (selector). attrCattribute， value): 设置 所 选 对 象 指定 属性 的 值 。 
例如 : 


alert( $ ("#w3s").attr("href")); // 显示 id 为 w3s 的 元 素 的 href 属性 值 
$ ("img").attr("width", "180"); // 将 所 有 img 元 素 的 width 属性 设置 为 180 





3. 在 文档 中 添加 新 的 HTML 元 素 或 内 容 


如 果 要 在 文档 中 的 指定 位 置 搬入 新 的 元 素 或 内 容 , 可 以 使 用 以 下 4 个 jQuery 方法 。 
。 append() : 在 被 选 元 素 的 结尾 处 添加 新 的 元 素 或 内 容 。 

。 prepend(): 在 被 选 元 素 的 开始 处 添加 新 的 元 素 或 内 容 。 

。 after() : 在 被 选 元 素 之 后 添加 新 的 元 素 或 内 容 。 
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。 Before(); 在 被 选 元 素 之 前 添加 新 的 元 素 或 内 容 。 


例如 : 

$ ("p").Pprepend("Some appended text. "); // 在 段落 的 起 始 处 添加 文字 内 容 

var prg = document. createElement("p"); // 创建 一 个 新 的 DOM 元 素 

prg. innerHTML = "Hello World! "; 

$ ("p").append(prg); // 将 新 建 对 象 添加 到 原 有 段落 元 素 的 结尾 
$ ("img").after("Some text after"); // 在 img 元 素 后 面 添加 一 段 文字 内 容 

$ ("img").after(prg); // 在 img 元 素 之 后 添加 一 个 新 元 素 


4. 删除 指定 的 HTML 元 素 
使 用 remove 方 法 可 以 删除 被 选 元 素 ( 若 被 选 元 素 含 有 子 元 素 , 则 一 起 删除 ); 使 用 
empty 方法 可 以 删除 被 选 元 素 的 所 有 子 元 素 。 例 如 : 


$ ("#div1"). remove(); // 删除 divl 及 其 所 有 子 元 素 
$ (" 井 divl") .empty(); // 清空 divl 中 的 所 有 子 元 素 


remove 方 法 还 允许 接收 一 个 参数 ,以 便 过 滤 被 删除 的 元 素 ,例如 : 


$ ("p").remove(". italic"); // 删除 段落 中 所 有 class 属性 为 italic 的 元 素 


5. 设置 HTML 元 素 的 CSS 样式 
使 用 jQuery 也 可 以 获取 或 设置 页 面 的 样式 ,还 可 以 动态 地 添加 或 删除 样式 。 
例如 在 文档 中 定义 了 以 下 CSS 样式: 


. important { font - weight:bold; font- size:xx— large; } 
.blue { color:blue; } 


用 户 可 以 使 用 以 下 代码 为 HTML 元 素 设置 样式 : 


$ ("hl1,h2,p").addclass("blue"); // 将 所 有 hi、h2 及 p 元 素 设 置 为 .blue 样式 
$("div").addClass("important"); // 将 所 有 div 元 素 设置 为 . important 样式 











有 户 还 可 以 使 用 以 下 代码 删除 或 切换 HTML 元 素 的 样式 : 








$ ("hl1, h2,p").removeClass("blue"); // 对 所 有 hl 、h2 及 p 元 素 删除 . blue 样式 
$ ("hl, h2,p"). toggleClass("blue"); // 对 所 有 hi、h2 及 p 元 素 切 换 (添加 /删除 ) 样 式 


3.4.3 使 用 jQuery 进行 DOM 遍历 


jQuery 提供 了 多 种 遍历 DOM 的 方法 ,可 以 从 一 个 指定 结 点 出 发 向 上 遍历 其 父 级 结 点 ， 
向 下 遍历 其 子孙 结 点 ,或 平 级 遍历 其 兄弟 结 点 ; 还 可 以 对 选择 的 结 点 进行 条 件 过 滤 。 
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1. 向 上 遍历 父 级 结 点 

















户 可 以 使 用 以 下 3 个 方法 来 遍历 选 定 元 素 的 父 级 结 点 。 

。 parent: 返回 被 选 元 素 的 直接 父 元 素 。 

。 parents: 返回 被 选 元 素 的 所 有 祖先 元 素 ( 向 上 直到 文档 的 根 元 素 ) 。 

。 parentsUntil() : 返回 介 于 当前 元 素 与 指定 元 素 之 间 的 所 有 祖先 元 素 。 
例如 有 以 下 HTML 内 容 定 义 : 














<body class = "ancestors"> body ( 曾 曾 祖父 ) 
<div style= "width:500px;">div (曾祖 父 ) 
<ul>ul (祖父 ) 
<1i>1i (直接 父 ) 
< span > span </span> 
</1i> 
</ul> 
</div> 
</body > 


执行 以 下 3 行 代码 : 
$ ("span").parent().css({"color":"red", "border":"2px solid red"}); 
$ ("span").parents().css({"color":"red", "border":"2px solid red"}); 


$ ("span").parentsUntil("div").css({"color":"red", "border":"2px solid red"}); 


由 于 “span” 元 素 的 父 节 点 为 “li 元 素 , 所 以 第 一 行 只 对 “li” 元 素 设 置 样式 ; 第 二 行为 所 


有 父 元 素 设 置 样式 ,所 以 从 *body” 到 ”li 各 个 元 素 都 加 上 了 红色 边框 ; 第 三 行为 “div” 元 素 
以 下 的 各 级 父 节 点 设置 样式 ,所 以 "ul 和 ”1 元 素 加 上 了 红色 边框 。 


2. 向 下 遍历 子孙 结 点 


汝 


户 可 以 使 用 以 下 两 个 方法 遍历 当前 结 点 的 子孙 结 点 。 

children(): 返回 被 选 元 素 的 所 有 直接 子 元 素 ( 即 向 下 一 级 对 DOM 树 进 行 遍历 ) 。 
find(): 返回 被 选 元 素 的 后 代 元 素 , 一 路 向 下 直到 最 后 一 个 后 代 。 

例如 : 





$ ("#div1"). children(); // 返回 divl 的 所 有 直接 子 结 点 
$ ("#div1i"). find(" *"); // 返回 divl 的 所 有 后 代 结 点 
$ ("#div1"). find("span"); // 返回 divl 后 代 中 所 有 的 span 元 素 


$(" 井 divl").children("p.cl"); // 返回 divl 的 所 有 类 名 为 cl 的 段落 子 元 素 


3. 平 级 遍历 兄弟 结 点 


有 很 多 方法 可 以 在 DOM 树 中 进行 同 级 遍历 ,常用 的 如 下 。 
。 siblings(): 返回 被 选 元 素 的 所 有 同胞 元 素 。 
。 next(): 返回 被 选 元 素 的 下 一 个 同胞 元 素 。 
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。 nextAll(): 返回 被 选 元 素 的 所 有 后 续 同胞 元 素 。 

。 nextUntil(): 返回 从 被 选 元 素 到 指定 元 素 的 所 有 后 续 同胞 元 素 。 
。 prev(): 返回 被 选 元 素 的 上 一 个 同胞 元 素 。 

。 prevAll() : 返回 被 选 元 素 的 所 有 前 续 同胞 元 素 。 

。 prevUntil(); 返回 从 被 选 元 素 到 指定 元 素 的 所 有 前 续 同 胞 元 素 。 








例如 : 

$ ("h2"). siblings(); // 返回 <h2 > 的 所 有 同胞 元 素 

$ ("h2"). siblings("p"); // 返回 <h2 > 的 所 有 同胞 元 素 中 的 <p> 元 素 
$ ("#div1"). next(); // 返回 divl 的 下 一 个 同胞 元 素 

$ ("h2").nextUntil("h6"); // 返回 从 < h2 > 到 < h6 > 的 所 有 同胞 元 素 


4. 条 件 过 滤 结 点 


用 户 可 以 使 用 以 下 方法 对 $ (selector) 返 回 的 结 点 进行 条 件 过 滤 。 

。 first(O) : 返回 被 选 元 素 中 的 首 元 素 。 

。 last() : 返回 被 选 元 素 中 的 最 末 一 个 元 素 。 

。 eq(): 返回 被 选 元 素 中 带 有 指定 索引 号 的 元 素 ( 索 引 从 0 开设 编号 ) 。 
。 filter() : 返回 被 选 元 素 中 所 有 满足 指定 条 件 的 元 素 。 

。 not() : 返回 被 选 元 素 中 所 有 不 满足 指定 条 件 的 元 素 。 


例如 ， 

$ ("div p").first(); // 返回 所 有 < div > 元 素 内 部 的 第 一 个 <p> 元 素 

$ ("div p"). last(); // 返回 所 有 < div > 元 素 内 部 的 最 后 一 个 <p> 元 素 

$ ("p").eq(1); // 返回 所 有 <p> 元 素 中 索引 号 为 1 的 元 素 (第 2 个 ) 
Sp ) Fitter( SEO // 返回 所 有 <p> 元 素 中 类 名 为 intro 的 部 分 元 素 
Smp") not( .intro"); // 返回 所 有 <p> 元 素 中 类 名 不 为 intro 的 部 分 元 素 


3.4.4 使 用 jQuery 实现 网 页 特效 
使 用 jQuery 可 以 实现 很 多 网 页 特效 ,例如 BootStrap 框架 就 借助 jQuery 提供 了 很 多 特 


这 里 只 做 简单 介绍 ,常用 的 特效 方法 如 下 。 





。 hide(): 隐藏 选 定 的 元 素 。 

。 show() : 显示 选 定 的 元 素 。 

。 toogle() : 对 选 定 的 元 素 在 隐藏 和 显示 之 间 切 换 。 

。 fadeIn() : 淡 入 已 隐藏 的 元 素 。 

。 fadeOut(): 淡出 可 见 的 元 素 。 

。 fadeToogle() : 对 指定 元 素 在 淡 入 ` 淡 出 之 间 进 行 切换 。 

。 slideDown(): 向 下 滑动 元 素 。 

slideUp(): 向 上 滑动 元 素 。 

slideToogle(): 对 指定 元 素 在 slideDown() 与 slideUp() 方 法 之 间 进 行 切 换 。 
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。 animate(): 对 指定 元 素 设置 动画 效果 。 
。 stop(): 在 动画 或 特效 完成 前 停止 动画 或 特效 。 





例如 : 

$ ("#divi"). fadeIn(); // 以 正常 速度 淡 入 

$ ("#div2"). fadeIn("slow"); // 慢 速 淡 入 

$ ("#div3"). fadeIn(3000); // 以 指定 的 时 长 慢 速 淡 入 
$ ("#panel"). slideDown(); // 将 panel 面板 向 下 展开 
$ ("#panel"). slideUp(); // 将 panel 面板 向 上 闭合 


$ (" 井 panel").slideToggle("slow"); // 对 panel 面板 在 展开 和 闭合 之 间 切 换 








在 调用 特效 方法 时 还 可 以 设 定 两 个 参数 ,格式 如 下 : 











$ (selector). 特效 方法 名 (speed, callback); 


第 一 个 参数 用 于 指定 特效 的 执行 速度 ,可 以 用 fast、slow 或 一 个 毫秒 数 撒 述 ; 第 二 个 参 
数 可 以 指定 一 个 回调 函数 , 当 特 效 执行 完成 后 自动 调用 该 函数 。 例 如 : 


$ ("p").hide(1000, function(){ alert("The paragraph is now hidden"); }); 


该 代码 在 < p > 元 素 上 执行 隐藏 特效 ,特效 完成 时 间 为 1000 毫秒 ,完成 后 自动 调用 匿名 
函数 ,用 alert 显示 了 一 段 文字 。 
在 JQuery 中 还 允许 将 特效 方法 连接 起 来 ,形成 一 系列 连续 特效 ,例如 : 


$ ("i#p1").css("color", "red"). slideUp(2000). slideDown(2000); 


这 里 对 id 为 pl 的 元 素 首 先 设置 CSS 样式 ,然后 调用 slideUp 特效 关闭 显示 ,接着 又 调 
用 slideDown 特效 展开 显示 。 


6.5 BootStrap 框架 
2 


Web 开发 的 任务 通常 分 为 前 端 开 发 与 后 端 开发 两 个 部 分 : 前 者 主要 关注 应 用 程序 的 可 
视 化 界面 及 用 户 交 互 ,代码 运行 在 客户 端 ; 后 者 主要 关注 请 求 处 理 `, 业 务 逻 辑 及 数据 持久 化 
逻辑 ,代码 运行 在 服务 器 端 。 显 然 ,前 端 开发 与 后 端 开 发 在 技术 上 存在 很 大 的 差异 ,通常 后 
端 开发 人 员 长 于 软件 架构 和 编程 ,但 对 界面 美化 较为 生疏 ; 而 前 端 开 发 人 员 长 于 布局 .配色 
和 切 图 ,但 普遍 编程 能 力 薄弱 。 

近 几 年 来 随 着 技术 的 发 展 , 前 端 开发 的 重要 性 越 来 越 凸 显 出 来 ,不 仅 需要 良好 的 界面 ,还 
需要 大 量 的 编程 。 显 然 ,传统 的 美工 和 程序 员 都 难以 胜任 前 端 开 发 的 重任 ,急需 一 套 开发 框架 
帮助 开发 人 员 高 效 地 搭建 应 用 程序 的 前 端 系统 。BootStrap 就 是 目前 最 流行 的 一 套 前 端 开发 
框架 , 它 让 前 端 开发 更 加 快速 .简单 ,让 所 有 开发 者 都 能 快速 上 手 , 并 且 所 有 设备 都 可 以 适 配 。 


3.5.1 BootStrap 基础 























BootStrap 是 最 受 欢 迎 的 HTML、CSS 和 JS 框架 ,用 于 开发 响应 式 布局 .移动 设备 优先 
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的 Web 项 目 ,目前 的 稳定 版 本 是 3. 3. 7。BootStrap 最 早 由 Twitter 的 两 名 工程 师 开 发 , 目 
前 已 成 为 Github 上 的 开源 项 目 。 它 的 主要 特性 如 下 。 

(1) 移动 设备 优先 : 样式 库 中 包含 针对 移动 设备 优化 的 样式 。 

(2) 多 浏览 器 支持 : 目前 主流 的 IE、Firefox、Chrome、Opera Safari 等 浏览 器 都 支持 
BootStrap 。 

(3) 响应 式 设 计 : 其 响应 式 CSS 能 够 自 适应 台式 机 、 平 板 电脑 和 手机 等 各 种 不 同 尺寸 
的 设备 。 

(4) 容易 上 手 : 使 用 非常 简单 ,只 要 具有 HTML 和 CSS 基础 就 可 以 使 用 BootStrap。 

BootStrap 框架 的 主要 内 容 如 下 。 

(1) 全 局 CSS 样式 : BootStrap 提供 了 一 套 全 局 CSS 样式 ,所 有 HTML 元 素 均 可 以 通 
过 class 属性 设置 样式 并 得 到 增强 效果 ; 另外 还 有 一 套 先进 的 栅 格 系统 ,用 于 方便 地 实现 布 
局 控制 。 

(2) 可 重用 组 件 : BootStrap 定义 了 一 批 可 重用 的 组 件 , 用 于 创建 图 像 、 菜 单 、. 导 航 条 、 
弹出 框 、 进 度 条 .面板 等 ,总 之 常用 的 Web 页 面 组 件 都 能 在 这 里 找到 ,使 用 非常 方便 。 

(3) JavaScript 插件 : BootStrap 提供 了 一 批 自 定义 的 jQuery 插件 ,可 以 实现 模 态 对 话 
框 \ 下 拉 菜 单 、 深 动 监听 、 标 签 页 等 复杂 效果 ,为 站 点 提供 了 更 多 的 互动 。 

下 面 通过 一 个 简单 示例 了 解 使 用 BootStrap 框架 的 基本 方法 。 

例 3-21 第 一 个 BootStrap 示例 (03-21. html)。 

使 用 Visual Studio 创建 一 个 空 的 Web 网 站 ,并 添加 一 个 index. html 页 面 , 代 码 如 下 : 



































<!idoctype html > 
<html> 
<head> 
<meta charset = "utf - 8"> 
<meta http 一 equiv= "X— UA ~ Compatible" content = "IE= edge"> 
<meta name = "viewport" content = "width = device - width，initial - scale= 1"> 
<! -- 上 面 3 个 meta 标 签 必 须 放 在 最 前 面 ,任何 其 他 内 容 都 必须 跟随 其 后 -一 > 
<title> 第 一 个 BootStrap 示例 </title> 
<link href = "StyleSheet. css" rel = "stylesheet" /> 
<! —— Bootstrap 一 一 > 
<1link href = "https://cdn. bootcss. com/bootstrap/3.3.7/css/bootstrap.min. css" 
rel = "stylesheet"” /> 
</head > 
<body > 
<nav class = "navbar navbar - inverse navbar — fixed — top"> 
<div class = "container"> 
<div class = "navbar - header"> 
<button type = "button" class = "navbar ~ toggle collapsed" 
data ~ toggle = "collapse" data— target = "#navbar" 
aria- expanded = "false" aria— controls= "navbar"> 
< span class = "sr — only"> Toggle navigation </span> 
<span class = "icon- bar"></span> 
< span class = "icon- bar"></span> 
< span class = "icon- bar"></span> 
</button> 
<a class= "navbar - brand" href ="#">Project name </a> 
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</div> 
<div id = "navbar" class = "collapse navbar - collapse"> 
<ul class = "nav navbar 一 nav"> 
<1li class = "active"><a href =" 井 "> Home</a></1i> 
<1i><ahref ="#about"> About </a></1i> 
<1i><ahref ="#contact"> Contact </a></1i> 
</ul> 
</div><! --/.nav-collapse -一 > 
</div> 
</nav> 
<div class= "container"> 
<div class= "starter — template"> 
<hl > Bootstrap starter template </hl > 
<p class= "lead"> Use this document as a way to quickly start any new 
project.<br> All you get is this text and a mostly barebones HIML document.</p> 
</div> 
</div><! -- /.container -一 > 
<! -- jQuery (necessary for Bootstrap's JavaScript plugins) -一 > 
<script src = "https://cdn. bootcss. com/jquery/1.12.4/jquery. min. js"></script> 
<! -- Include all compiled plugins (below), or include individual files as needed -一 > 
< Script src = "https://cdn. bootcss. com/bootstrap/3.3.7/js/bootstrap. min. js"></script> 
</body> 
</html > 


然后 向 网 站 添加 StyleSheet. css 样式 单 文件 ,内 容 如 下 : 


body { padding ~ top: 50px; } 
. starter 一 template { padding: 40px 15px; text -align: center; } 


局 动 该 网 站 ,在 浏览 器 中 访问 index. html 页 面 ,效果 如 图 3-12(a) 所 示 。 

拖 动 浏览 器 窗口 的 右边 框 缩小 宽度 ,使 其 变 为 手机 浏览 器 形状 ,如 图 3-12(b) 所 示 。 

可 以 看 出 页 面 内 容 会 随 着 浏览 器 的 尺寸 自动 调整 ,完全 能 够 适应 手机 等 移动 设备 的 屏 
幕 尺寸。 注意 观察 菜单 栏 的 变化 ,由 于 无 法 显示 3 个 菜单 项 ,自动 采用 了 隐藏 菜单 的 形式 ， 
单 击 页 面 右上 角 的 国 图 标 ,菜单 项 能 够 浮动 显示 出 来 ,如 图 3-12(c) 所 示 。 

这 就 是 使 用 BootStrap 框架 创建 的 一 个 响应 式 页 面 ,要 点 说 明 如 下 : 

(1) BootStrap 使 用 到 的 某 些 元 素 需 要 将 页 面 设 置 为 HTML5 文档 类 型 ,所 以 第 一 行 的 
文档 类 型 说 明 必须 写成 以 下 形式 : 

















<!ldoctype html > 


(2) 为 确保 “移动 设备 优先 ”的 特性 ,在 head 中 必须 增加 以 下 说 明 , 以 使 视窗 (viewport) 
能 够 自动 缩放 以 适应 设备 的 尺寸 。 














<meta name = "viewport" content = "width = device— width，initial - scale = 1"> 
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(b) 小 尺寸 下 的 显示 效果 (©) 小 尺寸 下 的 菜单 显示 效果 


图 3-12 第 一 个 BootStrap 页 面 


(3) 为 使 用 BootStrap 提供 的 全 局 样式 需要 引入 相应 的 CSS。 本 例 使 用 了 BootStrap 
官方 提供 的 CDN 链接 ,引用 格式 如 下 : 


<1link href = "https://cdn. bootcss. com/bootstrap/3. 3.7/css/bootstrap. min. css" rel = 
"stylesheet" /> 


当然 也 可 以 从 官方 下 载 相应 的 CSS 文件 保存 在 本 地 ,并 在 页 面 中 使 用 本 地 链接 引用 。 
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(4) 为 了 使 用 BootStrap 的 UI 组 件 及 JS 插件 ,必须 引入 jQuery 库 和 BootStrap 核心 
JS 库 , 引 用 格式 如 下 : 























< script src = "https://cdn. bootcss. com/jquery/1.12.4/jquery. min. js"></script> 
<script src = "https://cdn. bootcss. com/bootstrap/3.3.7/js/bootstrap. min. js"></script> 











这 里 同样 使 用 了 官方 的 CDN 链接 ,也 可 以 下 载 到 本 地 进行 引用 ,最 好 将 这 两 个 引用 放 
在 body 元 素 的 底部 ,以 加 快 页 面 的 加 载 速 度 。 

(5) 在 页 面 项 部 使 用 了 响应 式 的 导航 条 ,这 通过 BootStrap 的 nav 组 件 实现 ,而 该 组 件 
又 依赖 于 collapse 插件 ,所 以 上 面 提 到 的 两 个 JS 库 必须 引入 。 关 于 nav 组 件 和 collapse 搬 
件 的 详细 用 法 ,请 读者 参阅 BootStrap 官方 文档 。 

(6) 页 面 中 大 量 使 用 了 BootStrap 的 全 局 样式 ,使 用 方法 就 是 设置 各 元 素 的 class 属性 ， 
并 且 对 一 个 元 素 可 以 设置 多 个 class 属性 ,以 使 其 同时 遵循 多 个 样式 的 要 求 。 关 于 各 类 样式 
的 使 用 详情 ,请 读者 参阅 BootStrap 官方 文档 。 


3.5.2 栅 格 布局 系统 


布局 控制 通常 是 页 面 设计 中 的 一 个 重点 和 难点 问题 ,常用 的 方法 有 表格 布局 .DIV 布 
局 .Frame 布局 等 。 为 了 解决 布局 难题 ,BootStrap 引入 了 流 式 栅 格 系统 。 

类 似 于 表格 布局 , 栅 格 系统 通过 一 系列 的 行 与 列 的 组 合 来 创建 页 面 布局 ,页 面 内 容 就 放 
和 人 这些 创建 好 的 布局 中 。 请 看 以 下 示例 : 

例 3-22 BootStrap 栅 格 布局 示例 。 

在 浏览 器 的 地 址 栏 中 输入 *http://v3. bootcss. com/getting-started/ #examples” ,导航 
到 BootStrap 的 示例 列表 , 单 击 打开 其 中 的 “Jumbotron” 示 例 , 页 面 效 果 如 网 3-13 所 示 。 

| 


€ » © | vibootcsconveramptenbo 要 让 
































Hello, world! 


This is a template for a simple marketing or informational website It includes a large callout called a jumbotron and three 
supporting pieces of content Use it as a starting point to create something more unique. 





Heading 


ettnon 





vew dea » 





图 3-13 ”BootStrap 栅 格 布局 示例 的 显示 效果 
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这 是 一 个 典型 的 首页 模板 ,注意 底部 的 3 个 Heading 内 容 , 从 左 到 右 依次 排 开 ,属于 典 
型 的 流 式 栅 格 布局 ,核心 代码 如 下 : 





<div class= "container"> 
<div class= "row"> 
<div class= "col- md- 4"> 
<h2 > Heading </h2> 
<p>Donec id elit non mi ...... </p> 
<p><aclass= "btn btn— default" href ="#" role= "button"> View details </a></p> 
</div> 
<divclass= "col -md- 4"> 
<h2 > Heading </h2> 
<p>Donec id elit non mi ...... </p> 
<p><aclass= "btn btn— default" href =" 井 "role = "button"> View details </a></p> 
</div> 
<div class= "col -md—4"> 
<h2 > Heading </h2> 
<p>Donec sed odio dui,,,,,. </p> 
<p><aclass= "btn btn— default" href =" 井 " role = "button"> View details </a></p> 


</div> 
</div> <! -- /row --> 
</div> <!-- /container -一 > 


本 例 的 栅 格 系统 包含 一 个 class 二 "row" 的 div 元 素 , 以 及 3 个 class 二 "col-md-4" 的 div 
元 素 ,这 样 构造 出 1 行 3 列 的 栅 格 ,文字 内 容 放置 在 这 些 栅 格 中 ,实现 了 横向 3 列 的 布局 
控制 。 

在 使 用 栅 格 系统 时 要 注意 以 下 要 点 : 

(1) 行 (row) 必 须 包 含 在 . container( 固 定 宽度 ) 或 . container-fluid(100% 宽 度 ) 容 器 中 。 

(2) 通过 行 在 水 平方 向 上 创建 一 组 列 (column) , 且 只 有 列 可 以 作为 行 的 直接 子 元 素 。 

(3) 页 面 内 容 应 当 放置 于 列 中 

(4) 通过 为 列 设 置 padding 属性 可 以 创建 列 与 列 之 间 的 间隔 。 

(5) 一 行 最 多 可 以 容纳 12 个 列 , 若 大 于 12, 多 余 列 中 的 元 素 将 作为 一 个 整体 另 起 一 行 
排列 。 

(6) 可 以 将 多 列 合并 成 一 个 列 , 通 过 指定 1 到 12 的 值 来 表示 列 跨 越 的 范围 ; 在 本 例 中 
使 用 了 class 二 "col-md-4" ,表示 该 列 跨越 了 4 列 , 这 样 3 个 列 元 素 就 占 满 了 一 行 的 12 个 列 。 

为 适应 各 种 不 同 屏幕 尺寸 的 设备 ,BootStrap 内 置 了 4 种类, 分别 用 不 同 的 类 前 缀 来 表 
示 , 如 表 3-7 所 示 。 








表 3-7 针对 不 同 尺 寸 的 设备 使 用 的 类 前 缀 
屏幕 尺寸 超 小 屏幕 手机 | 小 屏幕 平板 中 等 屏幕 桌面 显示 器 大 屏幕 大 桌面 显示 器 











尺寸 临界 点 768px 二 768px 过 992px 三 1200px 
类 前 组 . COl-xs- . col-sm- . col-md- . col-lg- 




















栅 格 系统 行为 | 总 是 水 平 排列 | 小 于 临界 值 时 堆 琶 在 一 起 ,大 于 临界 值 时 水 平 排列 
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使 用 单一 的 一 组 “. col-md- x* ” 栅 格 类 就 可 以 创建 一 个 基本 的 栅 格 系统 ,在 超 小 屏幕 到 
小 屏幕 这 一 范围 内 这 些 栅 格 是 堆 生 在 一 起 的 , 当 扩大 到 中 等 屏幕 太 寸 时 这 些 顶 格 将 变 为 水 
排列 。 请 看 以 下 代码 : 









































.| 








<div class = "container"> 
<div class= "row"> 
<divclass= "col - md- 8">.col -md— 8</div> 
<divclass= "col - md- 4">.col - md- 4</div> 
</div> 
<div class= "row"> 
<divclass= "col - md- 4">.col -md— 4</div> 
<divclass= "col ~- md- 4">.col -md— 4</div> 
<div class= "col ~ md- 4">.col -md— 4</div> 
</div> 
<div class= "row"> 
<divclass= "col -md—6">.col - md- 6</div> 
<divclass="col - md- 6">.col -md- 6</div> 
</div> 
</div> <! -- /container -一 > 


第 一 行 被 分 为 8 : 4 两 个 栅 格 ,第 二 行 被 分 为 4:4: 4 三 个 栅 格 ,第 三 行 被 分 为 6 : 6 两 
个 栅 格 。 在 计算 机 显示 器 上 尝试 放大 、 缩 小 浏览 器 窗口 ,观察 栅 格 的 排列 情况 ,可 以 看 到 当 
窗口 尺寸 小 于 992px 时 一 行 中 的 栅 格 会 自动 变 为 多 行 堆 释 起 来 。 

如 果 不 和 希望 在 中 小 屏幕 设备 上 栅 格 堆 释 起 来 ,就 要 使 用 针对 超 小 屏幕 和 中 等 屏幕 设备 
所 定义 的 类 , 即 “. col-xs-x* ”和 “*. col-md- * ”, 请 看 以 下 示例 : 


<div class = "row"> 
<div class= "col-xs-12col-md-8">.col-xs-12.col-md-8</div> 
<div class="col-xs-6col-md-4">.col-xs-6.col-md-4</div> 
</div> 
<div class = "row"> 
<divclass="col -xs-6col-md-4">.col—-xs-6 .col-md-4</div> 
<div class= "col-xs-6col-md-4">.col-xs-6.col-md-4</div> 
<div class= "col-xs-6col-md-4">.col-xs-6.col-md-4</div> 
</div> 
<div class = "row"> 
<div class= "col -xs—6">.col -xs—-6</div> 
<div class= "col-xs-6">.col-xs-6</div> 
</div> 


该 页 面 以 中 等 屏幕 为 基准 设计 , 当 窗 口 尺 寸 小 于 中 等 屏幕 临界 值 时 ,会 自动 切换 到 超 小 
屏幕 的 机 格 分 布 。 


3.5.3 表单 系统 


表单 是 Web 前 端 设计 中 必 不 可 少 的 一 部 分 内 容 , 使 用 BootStrap 可 以 快速 设计 出 美 
观 、 实 用 的 表单 ,请 看 如 下 代码 片段 : 
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<form> 
<div class= "form— group"> 
<1label for = "tbxEmail"> Email address </label > 
<input type = "email" class = "form— control" id= "tbxEmail" placeholder = "Email"> 
</div> 
<div class= "form— group"> 
<label for = "tbxPwd"> Password </label > 
< input type = "password" class = "form— control" id = "tbxPwd" placeholder = "Password"> 
</div> 
<div class = "checkbox"> 
<label > < input type = "checkbox"> Check me out </label > 
</div> 
<button type = "submit" class = "btn btn - default"> Submit </button > 
</form > 


该 表单 的 显示 效果 如 图 3-14 所 示 。 
Emailaddress 


Email 


Password 


Password 


国 Check me out 


Submit 
图 3-14 登录 表单 的 显示 效果 


在 表单 中 ,通常 为 输入 元 素 (< input >、< textarea > 及 < select > 等 ) 设 置 . form-control 样 
式 , 这 样 系统 会 将 其 宽度 默认 设置 为 width:100% 。 另 外 ,由 于 < label > 元 素 与 输入 元 素 密 
切 相 关 ,通常 将 其 与 输入 元 素 一 起 包 庄 在 class 二 "form-group" 的 div 元 素 中 ,以 获得 更 好 的 
排列 效果 。 

为 表单 添加 . form-inline 类 可 使 其 内 容 左 对 齐 并 且 表 现 为 inline-block 级 别 的 控件 ,请 
看 以 下 示例 代码 : 


<form class = "form- inline"> 
<div class= "form- group"> 
<label class = "sr— only" for = "tbxEmail"> Email address </label> 
< input type = "email" class = "form— control" id= "tbxEmail" placeholder = "Email"> 
</div> 
<div class= "form- group"> 
<label class = "sr— only" for = "tbxPwd"> Password </label > 
< input type = "password" class= "form— control" id = "tbxPwd" placeholder = "Password"> 
</div> 
<div class= "checkbox"> 
<label >< input type = "checkbox"> Remember me </label > 
</div> 
<button type = "submit" class = "btn btn— default"> Sign in </button > 
</form> 
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该 表单 的 显示 效果 如 图 3-15 所 示 。 需 要 注意 的 是 ,内 联 表单 要 求 视窗 尺寸 必须 达到 
768px 以 上 ,和 否则 会 以 折叠 的 方式 显示 。 








Email Password 目 Rememberme Sign in 


图 3-15 ”为 表单 设置 form-inline 样式 后 的 显示 效果 








为 了 实现 如 图 3-16 所 示 的 水 平 排列 label 与 输入 控件 的 效果 ,可 以 使 用 . form- 
horizontal 类 ,并 配合 栅 格 布局 ,使 每 个 form-group 都 表现 为 栅 格 系统 中 的 一 行 ,示例 代码 
如 下 : 








Email Email 
Password Password 


目 Remember me 


Signin 


图 3-16 为 表单 设置 form-horizontal 样式 后 的 显示 效果 


<form class = "form - horizontal"> 
<div class = "form— group"> 
<label for= "Email" class = "col - sm— 2 control - label"> Email </label > 
<div class= "col- sm 一 10"> 
< input type = "email" class = "form- control" id= "Email" placeholder = "Email"> 
</div> 
</div> 
<div class= "form— group"> 
<label for= "PWD" class= "col- sm— 2 control- label"> Password </label > 
<div class= "col- sm 一 10"> 
< input type = "password" class= "form— control" id = "PWD" placeholder = "Password"> 
</div> 
</div> 
<div class= "form— group"> 
<div class= "col- sm— offset -2 col- sm-10"> 
<div class = "checkbox"> 
<label > < input type = "checkbox"> Remember me </label > 
</div> 
</div> 
</div> 
<div class= "form— group"> 
<div class= "col- sm— offset -2 col- sm—10"> 
<button type = "submit" class = "btn btn - default"> Sign in</button> 
</div> 
</div> 
</form> 











该 例 中 对 于 checkbox 和 button 两 个 控件 ,其 div 容器 都 使 用 了 class 一 "col-sm-offset-2 
col-sm-10" ,指定 该 容器 占用 10 个 栅 格 ,上 且 向 右 偏 移 两 个 栅 格 ,实现 了 与 输入 框 对 齐 摆 放 的 
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效果 。 

除 栅 格 布局 系统 和 表单 系统 之 外 , BootStrap 框架 的 全 局 CSS 还 提供 了 大 量 的 样式 模 
板 , 用 于 简化 页 面 内 容 排 版 表格 排版 以 及 按钮 .图 像样 式 控制 等 。 使 用 这 些 模板 ,开发 人 员 
不 再 需要 设计 复杂 的 CSS, 只 需 按 模板 要 求 简单 地 复制 代码 就 可 以 实现 增强 的 页 面 效 果 。 


3.5.4 导航 条 组 件 


导航 条 是 Web 中 的 常用 组 件 ,BootStrap 使 用 nav 组 件 实现 导航 条 效果 ,并 且 人 允许 对 导 
航 条 进行 多 种 定制 。 
本 节 的 第 一 个 示例 就 使 用 了 导航 条 ,其 核心 代码 如 下 : 


























<nav class = "navbar navbar - inverse navbar — fixed - top"> 
<div class = "container"> 
<div class = "navbar - header"> 
<button type = "button" class = "navbar — toggle collapsed" 
data— toggle = "collapse" data— target ="#navbar" 
aria ~ expanded = "false" aria- controls = "navbar"> 
<span class = "sr ~ only"> Toggle navigation </span> 


<span class = "icon - bar"></span> 
<span class = "icon - bar"></span> 
< span class = "icon - bar"></span> 
</button > 
<a class = "navbar — brand" href =" 井 "> Project name </a> 
</div> 


<div id= "navbar" class = "collapse navbar - collapse"> 
<ul class = "nav navbar — nav"> 
<liclass="active"><a href ="#">Home </a></1i> 
<1i><a href ="#about"> About </a></1i> 
<1i><a href ="#contact">Contact </a></1i> 
</ul> 
</div> <! --/.nav— collapse -一 > 
</div> <! -- /.container -一 > 
</nav> 


通过 该 示例 可 以 学 习 导 航 条 组 件 的 一 般 用 法 : 

(1) 可 以 使 用 < nav > 标签 或 者 role 二 "navigation"” 的 < div > 标签 来 构造 导航 条 ; class 
属性 中 的 navbar-inverse 指定 使 用 反 色 的 导航 条 ,而 “navbar-fixed-top” 指 定 导 航 条 固定 在 
页 面 顶 部 ,不 会 随 着 页 面 滚动 而 消失 。 

(2) 为 控制 导航 条 中 内 容 的 排列 ,一般 都 会 在 < nav > 中 嵌 套 一 个 “class 一 "container"” 
或 “class 二 "container-fluid"” 的 div 元 素 ,前 者 使 容器 中 的 内 容 居 中 排列 ,后 者 使 容器 中 的 内 
容 顶 头 排列 。 

(3) 为 适应 多 种 类 型 的 设备 ,导航 条 内 容 被 分 为 折 释 部 分 和 非 折 生 部 分 ,前 者 在 页 面 宽 
度 变 罕 时 会 自动 折 笃 ,而 后 者 始终 显示 ; 使 用 “class 二 "navbar-header"” 的 div 标签 构造 非 
折 双 部 分 ,而 使 用 “class 二 "collapse navbar-collapse" ”的 div 标签 构造 折 笃 部 分 。 

(4) 通常 将 非 折 县 部 分 称 为 "导航 头 ”, 它 通常 包含 一 个 网 站 Logo 和 一 个 菜单 按钮 ; 网 
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站 Logo 可 以 是 文字 ,也 可 以 是 图 片 ,本 例 中 使 用 了 超 链 接 文字 , 即 “< a class 一 "n 





avbar- 


brand" href 王 " 井 "> Project name </a >”, 也 可 以 将 文字 内 容 Project name 替换 成 一 个 








<img > 标签 以 插入 图 片 Logo; 使 用 "class 





"navbar-toggle collapsed"” 的 < button > 标签 创 


建 了 菜单 按钮 ,并 设置 其 data-target 属性 为 # navbar, 表示 该 按钮 包含 的 折 生 内容 为 


上 navbar 对 象 ; 多 个 < span > 标签 指明 了 菜单 按钮 上 的 显示 内 容 , 即 显示 3 条 横 线 。 


(5) 使 用 “< div id 二 "navbar" class 王 "collapse navbar-collapse">” 构 造 可 折 释 的 菜单 容 


器 ,所 有 的 菜单 项 都 包含 在 该 容器 中 ,并 且 要 注意 该 容器 的 id 属性 应 与 菜单 按钮 前 


data 


target 属性 一 致 ; 本 例 采用 无 序列 表 的 形式 组 织 多 个 超 链 接 形成 菜单 项 ,这 也 是 最 常 使 用 


的 菜单 形式 。 








除 超 链接 以 外 ,在 导航 条 上 还 可 以 放置 表单 ,按钮 .文本 等 其 他 内 容 。 对 导航 条 
单元 素 使 用 . navbar-form 类 ,系统 会 较 好 地 对 齐 显示 ,并 在 页 面 变 罕 时 自动 折 伙 。 
在 上 例 的 </ul > 标签 后 面 加 入 以 下 代码 : 





<form class = "navbar ~ form navbar ~ right" role= "search"> 
<div class= "form- group"> 
< input type = "text" class = "form— control" placeholder = "Search"> 
</div> 
<button type = "submit" class = "btn btn - default"> Submit </button > 
</form> 


导航 条 的 显示 效果 如 图 3-17 所 示 。 


图 3-17 带 有 搜索 表单 的 导航 条 


3.5.5 面板 组 件 


上 的 表 


在 页 面 中 经 常 要 将 一 些 内 容 放置 在 矩形 或 圆 角 齿 形 的 盒子 里 ,这 可 以 使 用 BootStrap 





提供 的 面板 组 件 方便 地 实现 ,请 看 以 下 示例 : 


<div class = "panel panel — default"> 
<div class= "panel - heading"> <h3 class = "panel — title"> Panel title </h3> </div> 
<div class= "panel - body"> Panel content </div > 
<div class = "panel - footer"> Panel footer </div > 
</div> 
该 面板 的 显示 效果 如 图 3-18 所 示 。 
Panel title 


Panel content 


Panel footer 


图 3-18 面板 组 件 的 显示 效果 
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板 ,面板 又 包含 头 部 . 脚 部 和 内 容 3 个 部 分 ， 


瑟 








可 以 看 出 < div class 二 "panel"> 用 来 定义 
其 中 头 部 和 脚 部 可 以 省 略 。 

在 定义 面板 时 还 可 以 加 入 有 情境 效果 的 类 ,生成 针对 特定 情境 的 面板 ,例如 将 上 例 中 的 
panel-default 换 成 panel-primary、panel-success、panel-info、panel-danger、panel-warning 等 
情境 类 时 效果 会 大 不 相同 。 

查阅 BootStrap 的 组 件 文档 ,可 以 发 现 有 大 约 20 种 组 件 可 以 使 用 ,本 节 只 举例 说 明了 
导航 条 和 面板 两 种 组 件 的 用 法 ,其 余 组 件 请 参考 “http ://v3. bootcss. com/components/”。 


3.5.6 模 态 框 插件 


大 家 在 C/S 结构 的 应 用 中 经 常会 看 到 弹出 一 个 模 态 对 话 框 , 供 用 户 输入 数据 或 做 出 选 
择 。 在 B/S 应 用 中 要 弹出 模 态 框 需要 结合 使 用 多 项 技术 ,而 BootStrap 提供 了 现成 的 插件 ， 
可 以 很 方便 地 使 用 模 态 框 。 请 看 以 下 示例 : 






































<div id= "myModal" class = "modal fade" tabindex =" —1" role= "dialog"> 
<div class= "modal - dialog" role = "document"> 
<div class= "modal - content"> 
<div class = "modal - header"> 
<button type = "button" class = "close" data— dismiss = "modal" aria— label = "Close"> 
<span aria - hidden = "true"> &times;</span> 
</button> 
<h4 class= "modal -title"> Modal title </h4 > 
</div> 
<div class= "modal - body"> 
<p> One fine bodyg&hellip;</p> 
</div> 
<div class= "modal - footer"> 
<button type = "button" class = "btn" data- dismiss = "modal"> Close </button> 
<button type = "button" class = "btn btn ~ primary"> Save changes </button > 
</div> 
</div><! -- /.modal - content 一 > 
</div><! -- /.modal - dialog -一 > 
</div><! -- /.modal --> 


在 这 段 代码 中 定义 了 一 个 模 态 对 话 框 , 如 图 3-19 所 示 。 


Modaltitle 


One fine body. 





图 3-19 模 态 框 的 显示 效果 





[ | 
他 


可 以 看 出 这 里 连续 使 用 了 modal .modal-dialog 和 modal-content 几 个 样式 来 创 寻 
模 态 对 话 框 ,而 核心 的 内 容 都 放 在 modal-content 中 。 
modal-content 又 包含 3 部 分 。 


100 
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(1) 弹出 框 头 部 : 一 般 使 用 modal-header 表示 ,主要 包括 标题 和 关闭 按钮 。 

(2) 弹出 框 主体 : 一 般 使 用 modal-body 表示 ,定义 弹出 框 的 主要 内 容 。 

(3) 弹出 框 脚 部 : 一 般 使 用 modal-footer 表示 ,主要 放置 操作 按钮 。 

本 例 在 modal-header 中 使 用 < button > 标签 及 其 中 的 < span > 标签 定义 了 对 话 框 右上 角 























的 关闭 按钮 ,使 用 < h4 > 标签 定义 了 对 话 框 的 标题 。 


为 弹出 模 态 对 话 框 ,需要 一 个 触发 条 件 ,这 里 使 用 按钮 触发 ,代码 如 下 : 





<button type = "button" class = "btn btn— primary" data— toggle = "modal" 


data- target = "#myModal"> Launch demo modal </button> 


该 按钮 使 用 了 btn-primary 情境 样式 进行 突出 显示 , 单 击 该 按钮 将 触发 打开 id 为 # 


myModal 的 对 话 框 。 





在 BootStrap 库 中 共 提 供 了 十 余 款 JavaScript 插件 ,使 用 非常 简单 。 这 里 只 介绍 了 模 


态 对话 框 插件 的 用 法 ,其 他 插件 的 详细 使 用 方法 见 “http://v3. bootcss. com/javascript/”。 


6.6 习题 和 上 机 练习 


钮 ， 


1. 选择 题 
(1) 写 *“Hello World” 的 正确 JavaScript 语法 是 ( 和 
A. document. write("Hello World") B. "Hello World" 
C. response. write("Hello World") D. ("Hello World") 
(2) 下 列 JavaScript 判断 语句 中 ( ) 是 正确 的 。 
A, if(i==0) B. if(i=0) C. ifi==0 then  D. ifi=0 then 
(3) 下 列 选项 中 ( ) 不 是 网 页 中 的 事件 。 
A. onClick B. onMouseOver CC. onSubmit D. onPressButton 


(4) 阅读 以 下 JavaScript 语句 : 


var al = 10; 
Var a2 = 20; 
alert("al +a2="+al+a2) 


将 显示 ( ) 中 的 结果 。 
A. al+a2=30 B. al+a2=1020  C. al 十 a2 一 al 十 a2 
(5) 某 网 页 中 有 一 个 窗 体 对 象 , 其 名 称 是 mainForm。 该 窗 体 对 象 的 第 一 个 元 素 是 按 











其 名 称 是 myButton ,表示 该 按钮 对 象 的 方法 是 ( Ds 





A. document. forms. myButton B. document. mainForm. myButton 
C. document. forms[ 0]. element[ 0] D. 以 上 都 可 以 
(6) 在 JavaScript 浏览 器 对 象 模 型 中 , window 对 象 的 ( ) 属 性 用 来 指定 浏览 器 状态 


栏 中 显示 的 临时 消息 。 


A. status B. screen C. history D. document 
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(7) 下 列 选项 中 关于 浏览 器 对 象 的 说 法 错误 的 是 ( Ds 
A，history 对 象 记录 了 用 户 在 一 个 浏览 器 中 已 经 访问 过 的 URL 
B. location 对 象 相 当 于 正 浏览 器 中 的 地 址 栏 ,包含 关于 当前 URL 地 址 的 信息 
C. location 对 象 是 history 对 象 的 父 对 象 
D. location 对 象 是 window 对 象 的 子 对 象 
(8) 在 HTML 页 面 中 包含 一 个 按钮 控件 mybutton, 如 果 要 实现 单 击 该 按钮 时 调用 已 
定义 的 JavaScript 函数 compute, 要 编写 的 HTML 代码 是 ( 机 


A. <input name 一 "mybutton”type 一 "button”onBlur 王 "compute() "value 一 " 计 





























算 "> 

B. <input name="mybutton" type= "button" onFocus="compute()"value=" 计 
算 "> 

C. <input name="mybutton" type="button" onClick= "function compute()" 
value 王 "计算 "> 

D. < input name= "mybutton" type 一 "button" onClick="compute()"value=" 计 
算 "> 


(9) 分析 下 面 的 JavaScript 代码 段 ,输出 结果 是 ( )。 


var mystring = "I am a student"; 
var a=mystring. substring(9,13); 
document. write(a); 


A. stud B. tuden C. uden D. udent 
(10) 在 HTML 页 面 上 , 当 按 下 键盘 的 任意 一 个 键 时 都 会 触发 JavaScript 的 ( 。“) 事 件 。 
A. onFocus B. onBlur C. onSubmit D. onKeyDown 
2. 程序 题 


写 出 下 列 程序 的 运行 结果 : 


function replaceStr(inStr, oldStr, newStr) { 
Var rep = inStr; 
while (rep. indexOf (oldstr) > 一 1)1{ 
rep = rep.replace(oldStr, newStr); 
': 
return rep; 


} 
alert(replaceStr("how do you do", "do", "are")); 


(1) 在 页 面 中 引入 JavaScript 有 哪 几 种 方式 ? 
(2) 简要 说 明 JavaScript 的 异常 处 理 代码 结构 ,并 说 明 每 一 部 分 的 作用 。 
(3) 简 述 文档 对 象 模型 中 常用 的 查找 访问 元 素 结 点 的 方法 。 

















Em 
第 六 章 : 


Microsoft . NET Framework 提供 了 多 种 语言 ,例如 Visual Basic. NET、Visual C#、 
Visual C++ ,Visual J# ,Python 等 。 

C#( 读 作 C sharp) 是 一 种 简单 的 ` 面 向 对 象 .类 型 安全 的 编程 语言 , 它 是 Microsoft 专 
门 为 生成 在 . NET Framework 上 运行 的 各 种 应 用 程序 而 设计 的 。C# 从 C 和 C++ 衍生 而 
来 , 它 继承 了 C++ 最 好 的 功能 , 比 C++ 更 简洁 、 高 效 。 

Visual C 上 # 是 Microsoft 对 C# 语 言 的 实现 。Visual C# 和 .NET Framework 的 结合 使 
得 程序 设计 人 员 可 以 创建 Windows 应 用 程序 .XML Web Services、 分 布 式 组 件 、 数 据 库 应 
用 程序 等 。Visual Studio 通过 功能 齐全 的 代码 编辑 器 、 编 译 咒 、 项 目 模板 .设计 器 、 调 试 器 
等 工具 实现 了 对 Visual C# 的 支持 。 


(4.1 创建 一 个 简单 的 C# 程序 
mS 


先 看 一 个 简单 的 C# 程 序 , 从 而 使 读者 对 C# 程 序 有 一 个 初步 的 认识 。 

选择 “文件 ">" 新建 项 目 ” 命 令 , 在 “新 建 项 目 ” 对 话 框 中 选择 Visual C# 和 “控制 台 应 用 
程序 ”, 填 写 程序 的 保存 路 径 , 如 图 4-1 所 示 , 单 击 “ 确 定 " 按 钮 ,系统 将 自动 创建 一 个 控制 台 
明 序 的 框架 Program. cs, 代 码 如 下 : 


using System; 

using System. Collections. Generic; 
using System. Ling; 

using System. Text; 

using System. Threading. Tasks; 
namespace ConsoleApplicationl 


{ 
class Program 
{ 
static void Main( string[ ] args) 
{ 
} 
3} 
} 


代码 的 第 1 一 5 行 是 引入 命名 空间 。using 指令 的 作用 是 引入 命名 空间 ,System 或 
System. Collections. Generic 就 是 名 字 空 间 。 引 入 命名 空间 后 ,就 可 以 直接 使 用 它们 的 方法 
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图 4-1 新 建 一 个 控制 台 应 用 程序 


和 属性 。 在 建立 一 个 控制 台 应 用 程序 时 IDE 会 自动 引入 常用 的 命名 空间 。 

代码 的 第 6 行 namespace ConsoleApplicationl 是 声明 这 个 程序 使 用 的 命名 空间 。 

第 7 一 14 行 是 用 (} 括 起 来 的 C# 代 码 块 。 其 中 class Program 就 是 声明 类 名 。 一 般 类 
名 和 .cs 文件 名 相同 ,如果 更 改 了 . cs 文件 名 ,IDE 会 自动 更 新 类 名 。 类 里 面包 含 了 一 个 前 
态 的 Main() 方 法 , 它 是 程序 执行 的 起 点 和 终点 


不 


每 一 个 C# 程序 都 会 包含 一 个 Main() 方 法 ,这 里 在 MainO) 中 输入 以 下 代码 : 





Console. WriteLine( "Hello 2017 ! "); 


运行 程序 后 输出 “Hello 2017 !1” 字 样 。 这 里 Console 是 System 命名 空间 下 的 类 ， 
WriteLine 是 Console 类 的 方法 。 如 果 没 有 using System 引入 语句 , 则 需 写 成 以 下 形式 : 





System. Console. WriteLine( "Hello 2017"); 


通常 运行 程序 有 两 种 方式 , 即 调试 运行 ( 按 F5 键 )、 不 调试 运行 ( 按 Ctrl 十 F5 组 合 键 )。 
按 F5 键 启动 调试 ,程序 运行 结束 后 立即 关闭 ,如 果 发 生 异 常 能 定位 异常 ,还 可 设置 断 点 让 
程序 单 步 执行 。 按 Ctrl 十 F5 组 合 键 开始 执行 程序 后 提示 “请 按 任 意 键 继续 …”, 如 图 4-2 所 
示 , 通 常 这 种 方式 会 忽略 程序 设置 的 断 点 。 








画 CWindows\system3D\omd ere 
m -一 














图 4-2 按 Ctrl 十 F5 组 合 键 运行 程序 
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需要 附带 说 明 的 是 ,向 控制 台 输 出 有 以 下 几 种 常见 方式 : 


(1) Console. WriteLine( ); // 相当 于 换行 
(2) Console. WriteLine( 要 输出 的 值 ); // 输出 一 个 值 
例如 : 

Console.WriteLine ("Hello World! "); // 直接 输出 一 个 值 
String course = "C#"; 

Console. WriteLine( course); // 输出 一 个 变量 的 值 


(3) Console. WriteLine(" 格 式 字 符 串 "， 变 量 列表 ); // 格式 化 输出 变量 
例如 : 


Console. WriteLine( "我 的 课程 名 称 是 : {0}",course); 


.2 C# 基 本 语法 


4.2.1 C# 数 据 类 型 


C# 的 数据 类 型 分 为 两 大 类 , 即 值 类 型 (value types) 和 引用 类 型 (reference types)。 值 
类 型 和 引用 类 型 的 区 别 在 于 值 类 型 变量 直接 包含 它们 的 数据 ,而 引用 类 型 变量 存储 对 于 对 
象 的 引用 。 

1. 值 类 型 (value types) 

值 类 型 包含 简单 类 型 .结构 类 型 和 枚 举 类 型 。 

1) 简单 类 型 (simple type) 

简单 数据 类 型 就 是 . NET 系统 类 型 , 表 4-1 列 出 了 所 有 的 简单 数据 类 型 。 
表 41 C+# 的 简单 数据 类 型 






































类 型 | 关键 字 大 小 /精度 范 围 .NET 类 型 后 级 

byte 无 符号 8 位 整数 0~255 System. Byte 无 

sbyte | 有 符号 8 位 整数 一 128 一 127 System. SByte 无 

short 有 符号 16 位 整数 一 32 768 一 32 767 System. Int16 无 

ushort | 无 符号 16 位 整数 0 一 65 535 System. UInt16 无 

整 型 int 有 符号 32 位 整数 一 2 147 483 648 一 2 147 483 647 | System. Int32 F 可 
uint | 无 符号 32 位 整数 0~4 294 967 295 System. UInt32 | U 或 u 
long | 有 符号 64 位 整数 9 A System. Int64 L 或 1 

ulong | 无 符号 64 位 整数 0 一 OxfffEHEEEEEEEEEEE System. UInt64 UL 
float 士 1.5X10-4 一 士 3.4X10 开 System. Single F 或 f 

浮 点 型 Ne i 

double 士 5.0X10 型 一 士 1.8X103?8 | System. Double D 或 d 
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续 表 
类 型 | 关键 字 大 小 /精度 范 .NET 类 型 后 缀 
字符 型 | char | 16 位 Unicode 字 符 System Char 无 
布尔 型 bool | 8 位 空间 ,1 位 数据 true 或 false System. Boolean 无 
128 位 类 型 ,28 一 
小 数 型 | decimal ;5 Ce 类 士 1.0X10-2 一 士 7.9X102 System. Decimal | M 或 m 


2) 结构 类 型 (struct) 

将 所 有 相关 数据 项 (这 些 数据 项 的 数据 类 型 可 能 完全 不 同 , 称 为 域 ) 组 合 在 一 起 ,形成 一 
个 新 的 数据 结构 , 称 为 结构 (struct) 。 

结构 类 型 的 声明 格式 如 下 : 


struct 结构 名 { 
Public 数据 类 型 域名 ; 
}; 


下 面 的 代码 就 是 一 个 典型 的 结构 类 型 定义 , 它 定义 了 一 个 点 的 坐标 。 


struct Point { 
public Double x ,y,z; 
} 


在 使 用 该 结构 类 型 时 可 编写 以 下 代码 : 


Point p; 

p.x=100; 
Pp.y= 200; 
p.z=300 


值得 说 明 的 是 ,结构 类 型 不 仅 可 以 包含 数据 成 员 ,还 可 以 包含 函数 成 员 ,这 与 类 的 定义 
上 分 类 似 ,因此 结构 类 型 的 声明 可 以 细 化 为 以 下 形式 : 


struct 结构 名 { 
public 数据 类 型 域名 ; 


public void 方法 名 { 
// 方法 的 实现 
} 
}; 


下 面 看 结构 类 型 student 的 定义 ,所 有 与 student 关联 的 信息 都 作为 一 个 整体 进行 存储 
和 访问 。 
struct student { 


public int stud id; 
public string stud name; 
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public float stud marks; 
public void show details() { 
// 显示 学 生 的 详细 信息 
} 








关于 类 和 结构 的 主要 区 别 总 结 如 下 : 

(1) 结构 是 比 类 更 简单 的 对 象 。 和 类 一 样 , 它 可 以 包含 各 种 成 员 , 也 可 以 实现 接口 。 

(2) 结构 适合 表示 点 、 和 矩形 等 简单 的 数据 结构 ,和 使 用 类 相 比 可 以 降低 成 本 、 效 率 更 高 。 

(3) 最 重要 的 差别 在 于 结构 是 “ 值 类 型 ”, 而 类 是 “引用 类 型 ”, 结 构 不 支持 继承 。 

(4) 结构 的 实例 化 可 以 使 用 new 运算 符 , 也 可 以 不 使 用 new( 所 有 的 域 默认 为 0、false、 
null 等 ) ,而 类 的 实例 化 必须 使 用 new。 

3) 枚 举 类 型 (enumeration) 

枚 举 类 型 是 一 组 已 命名 的 数值 常量 。 使 用 这 种 方法 可 以 把 变量 的 取 值 一 一 列 出 ,变量 
只 能 在 所 列 的 范围 内 取 值 。 

枚 举 类 型 的 声明 格式 如 下 : 








enum 枚 举 名 { 
// 枚 举 元 素 列 表 
}; 


以 下 代码 定义 并 使 用 了 一 个 枚 举 类 型 {ruit。 


enum fruit 
{ ”Apple,Banana, Orange }; ” // 值 为 0.1、2 
class EnumTest { 

public static void Main( ) { 

int choice; 

choice = (int)fruit. Apple; 

Console. Write( "your choice:{0}", choice); 

} 


枚 举 元 素 的 默认 基础 类 型 为 int 型 。 在 默认 情况 下 ,第 一 个 枚 举 元 素 的 数值 为 0, 后 面 
每 个 枚 举 元 素 依 次 按 1 递增 。 在 初始 化 过 程 中 可 重 写 默 认 值 。 
如 果 定 义 了 下 列 枚 举 : 


public enum WeekDays { 
Monday, 
Tuesday, 
Wednesday = 20, 
Thursday, 
Friday=5 

} 


那么 Monday 的 值 是 0、Tuesday 是 1、Wednesday 是 20、Thursday 是 3、Friday 是 5。 
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和 值 类 型 相 比 ,引用 类 型 不 存储 实际 数据 ,而 是 存储 对 实际 数据 的 引用 。 引 用 类 型 包括 
对 象 .类 、 指 代 、 接 口 ` 数 组 .字符 串 等 。 

1) 对 象 类 型 (Object) 

在 C# 中 所 有 的 类 型 都 可 以 看 成 是 对 象 ,对 象 类 型 Object 是 一 切 类 型 的 基 类 型 。 
Object 类 型 对 应 的 . NET 系统 类 型 是 System. Object。 

2) 类 类 型 (Class) 

类 类 型 可 以 包含 数据 成 员 、 函 数 成 员 和 柑 套 类 型 。 数 据 成 员 为 常量 、 字 段 和 事件 。 函 数 
成 员 包 括 方法 、 属 性 、 索 引 、 操 作 符 、 构 造 函 数 和 析 构 函数 。 

一 个 类 可 以 派生 多 重 接 口 。 

3) 指 代 (delegate) 

指 代 类 型 可 将 方法 用 特定 的 签名 封装 。 用 户 可 以 在 一 个 指 代 实 例 中 同时 封装 静态 方法 
和 实例 方法 。 指 代 的 声明 格式 如 下 : 


2. 引用 类 型 (reference types) 






































delegate 返回 类 型 代理 名 (参数 列表 ) 
例如 : 


Public delegate double MyDelegate(double x);  // 声 明了 一 个 代理 类 型 
MyDelegate d; // 声 明 该 代理 类 型 的 变量 


对 代理 进行 实例 化 的 方法 如 下 : 
new 代理 类 型 名 (方法 名 ) ; 


其 中 ,方法 名 可 以 是 某 个 类 的 静态 方法 名 ,也 可 以 是 某 个 对 象 实例 的 方法 名 ,但 方法 的 
返回 值 类 型 必须 与 指 代 类 型 中 声明 的 一 致 。 例 如 : 


MyDelegate dl = new MyDelegate(System.Math. Sqrt); 
MyDelegate d2 = new MyDelegate(obj.myMethod()); 


4) 接口 类 型 (interface) 
一 个 接口 定义 一 个 只 有 抽象 成 员 的 引用 类 型 。 该 类 型 不 能 实例 化 对 象 ,但 可 以 从 它 派 
生出 类 。 
接口 的 声明 格式 如 下 : 
interface 接口 名 { 
// 接口 成 员 的 定义 
局 


以 下 是 一 个 接口 定义 的 例子 。 
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public interface MyInterf { 
void showface( ); 
} 


5) 数组 (array) 





数组 是 一 组 类 型 相同 的 有 序数 据 。 数 组 可 以 存储 整数 对 象 、 字 符 串 对 象 或 任何 一 种 





























户 提出 的 对 象 。 在 声明 数组 时 并 不 需要 明确 指定 其 大 小 ,和 否则 会 出 现 编译 错误 。 在 声明 多 











维 数组 时 每 一 维 之 间 要 用 逗号 隔 开 。 
例如 : 


string [ ] myarray = { "ab","aa","c","ddd"}; // 一 维 数组 
string [ ，] twarray; // 二 维 数组 


在 使 用 new 关键 字 新 建 数组 时 , 若 指定 了 数组 的 大 小 , 则 大 括号 { } 中 指定 的 元 素 个 数 
必须 相符 ,否则 会 出 错 ; 若 未 指定 大 小 , 则 根据 { } 中 元 素 的 个 数 自动 分 配 大 小 。 


例 4-1 使 用 一 维 数组 和 二 维 数组 (04-01. aspx) 。 


<% @page language = "C#"$%> 

<script language= "C#" runat = "server"> 

void page_load(object serder, EventArgs e) { 
int[ ] myArrayl = new int[5] {1,2,3,4,5}; 
int[, ] myArray2 = new int[2,3] {{1,2,3},{4,5,6}}; 
labContent1. Text = myArray1[1].ToString( ); 
labContent2. Text = myArray2[1,2].ToString(); 

1 

</script> 

<html > 

<body > 

<asp:label runat = server id = labContent1/><br> 

<asp:label runat = server id = labContent2/><br> 

</body> 

</html > 


在 上 例 中 分 别 定义 了 一 维 数组 和 二 维 数组 并 赋 了 初 值 ,然后 将 两 个 数 旨 
别 显 示 出 来 ,最 后 显示 的 结果 是 2 和 6。 

6) 字符 串 (Cstring) 

字符 串 类 型 就 是 string 类 型 。 它 是 由 一 系列 字符 组 成 的 ,所 有 的 字符 上 
号 中 的 。 例 如 , "this is a book. "和 "hello" 都 是 字符 串 。 

"A" 和 'A' 有 本 质 的 不 同 , 前 者 是 string 类 型 ,后 者 是 char 类 型 。 


4.2.2 运算 符 和 表达 式 











的 两 个 元 素 分 


运算 是 对 数据 进行 加 工 的 过 程 ,运算 符 就 是 描述 各 种 不 同 运算 的 符号 ,参与 运算 的 数据 


称 为 操作 数 ,操作 数 可 以 是 常量 、 变 量 或 者 函数 。 








表达 式 由 操作 数 和 运算 符 组 成 。 表 达 式 的 类 型 由 运算 符 的 类 型 决定 , 且 每 个 表达 式 都 











产生 一 个 唯一 的 








值 。 在 C# 中 可 以 进行 多 种 类 型 的 运 
串 ) 连 接 运算 和 人 逻辑 运算 等 。 
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去 算 ,例如 算术 运算 、 比 较 运 算 、( 字 符 


. 算术 运算 符 (Mathematical Operators) 


算术 运算 符 作 用 于 整 型 或 浮 点 型 数据 的 运 
算 , 若 操作 数 是 字符 串 





, 则 为 字符 号 


去 算 。C# 有 8 个 算术 运算 符 ,包括 十 (加 法 运 





和 连接 符 ) .一 (减法 运算 )、* (乘法 运算 )、/( 除 法 运算 )、 


%( 求 余数 ) .十 十 (将 操作 数 加 1) .一 一 (将 操作 数 减 1)、 一 (将 一 个 数 按 位 取 反 ) 。 
2. 赋值 操作 符 (Assignment Operators) 




















表 4-2 给 出 了 赋值 操作 符 。 
表 4-2 赋值 运算 符 (op: 操作 数 ) 
运 算 符 表 达 式 说 明 
= opl = op2 给 变量 赋值 
十 一 opl 二 二 op2 运算 结果 opl = opl 十 op2 
一 op1 一 一 op2 运算 结果 opl = op1 一 op2 
# 一 opl * 一 op2 运算 结果 opl = opl * op2 
/= opl/= op2 运算 结果 opl = opl / op2 
%= opl %= op2 运算 结果 opl = opl % op2 








3. 比较 运算 符 (Relational Operators) 


比较 运算 符 用 于 将 表达 式 两 边 的 值 进行 比较 ,其 返回 值 为 迎 辑 值 true 或 false。 
C# 有 6 个 比较 运算 符 , 即 等 于 (====)、 不 等 于 (!=)、 小 于 (二)、 大 于 (二 ) ,小 于 等 于 
(二 = 二 =)、 大 于 等 于 (这 =)。 


4. 逻辑 运算 符 (Logical Operators) 


逻辑 运算 符 对 布尔 值 true 和 false 进行 逻辑 比较 ,共有 3 个 逻辑 运算 符 , 即 &&& (表示 
逻辑 与 )、| |( 表 示人 逻辑 或 )、! (表示 迎 辑 非 ) 。 
辑 运 算 的 返回 值 是 true 或 false。 


5. 条 件 运 算 符 (Conditional Operators) 


> 上 只 有 一 个 条 件 运算 符 , 即 三 元 操作 符 (? : 


条 件 表达 式 ?语句 1: 


语句 2 











) , 它 是 ifelse 语句 的 缩写 。 其 形式 如 下 : 





如 果 条 件 表达 式 的 值 为 真 ,执行 语句 1, 否则 执行 语句 2。 
下 面 的 语句 使 用 了 条 件 运 算 符 : 


int resultl, result2 ; 


result1l 
result2 


10>1? .20 10 
10<1?205: 10 
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第 一 个 表达 式 “10 > 1” 为 比较 表达 式 ,其 值 为 true, 那 么 三 元 运算 符 的 返回 值 为 第 一 个 
值 20, 因 此 resultl 被 置 为 20。 第 二 个 条 件 表达 式 “10 < 1” 的 值 为 false, 那 么 三 元 运算 符 的 
返回 值 为 第 二 个 值 10, 因 此 result2 被 置 为 10。 














6. 位 运算 符 (Bitwise Operators) 
位 运算 符 对 二 进 制 位 (0 或 1) 进行 比较 和 操作 ,共有 6 种 运算 符 ( 见 表 4-3) ,注意 区 分 位 
运算 与 逻辑 运算 。“ 位 与 "运算 使 用 *&” 符 号 ,“ 人 好 辑 与 "运算 使 用 *&&” 符 号 。 
表 4-3 位 运算 符 











运 算 符 描述 运 算 符 描述 
& 位 与 ~ 位 非 
| 位 或 左 移 
“ 位 异 或 布 移 











对 于 位 与 运算 (&) 来 说 ,比较 两 位 二 进 制 数 ,如 果 都 是 1, 返 回 1, 否则 返回 0, 如 表 4-4 














所 示 。 
表 4-4 位 与 运算 的 结果 
位 1 位 2 位 1& 位 2 
0 0 0 
0 1 0 
0 0 
1 1 1 








类 似 地 ,对 于 其 他 的 位 运算 符 ,其 运算 结果 有 以 下 规律 : 

(1) 位 或 运算 (|) 比较 两 位 ,只 要 其 中 一 位 为 1 就 返回 1, 否 则 返回 0。 

(2) 位 异 或 运算 (^) 比 较 两 位 ,只 有 当 其 中 一 位 为 1 时 才 返 回 1, 和 否则 返回 0。 

(3) 如 果 位 是 0, 位 非 运算 (一 ) 返 回 1 ,否则 返回 0。 

(4) 左 移 运 算 (<<) 把 二 进 制 的 位 向 左 移动 指定 的 位 数 , 移 出 左边 的 数 被 丢弃 ,而 右边 位 
补 0。 

(5) 右 移 运 算 (>>) 把 二 进 制 的 位 向 右 移动 指定 的 位 数 , 移 出 右边 的 数 被 丢弃 ,而 左边 位 
补 0。 

下 面 的 例子 定义 了 两 个 叫 bytel 和 byte2 的 变量 : 





bytel 
byte2 


Ox9a; // 二 进 制 10011010, 十进制 154 
Oxdb; // 二 进 制 11011011, 十 进 制 219 


注意 ,bytel 被 设置 为 十 六 进 制 的 9a( 十 六 进 制 数 以 0x 开头 ), 用 二 进 制 表示 ,9a 就 是 
10011010 ,用 十 进 制 表示 就 是 154。 同 样 ,byte2 被 设置 为 十 六 进 制 的 db ,也 就 是 二 进 制 的 
11011011 ,十 进 制 的 219。 这 些 二 进 制 和 十 进 制 数 都 显示 在 bytel 和 byte2 赋值 后 的 注 
释 中 。 

设置 字 节 变量 result 存储 变量 bytel 和 byte2 的 位 运算 结果 。 
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将 结果 变量 设 为 10011010( 十 进 制 154) 。 为 什么 这 样 ? 看 一 下 二 进 制 数 ; 


result = (byte)(bytel & byte2); 


bytel = 10011010 (154) 
& byte2 = 11011011 (219) 


result = 10011010 (154) 


bytel 和 byte2 的 每 一 位 进行 与 运算 ,相应 位 的 运算 结果 列 在 了 下 面 。 可 以 看 到 最 后 的 
结果 为 二 进 制 数 10011010 ,也 就 是 十 进 制 数 154。 
例 4-2 位 运算 符 (04-02. cs) 。 


class 04 一 02 { 
public static void Main{} { 


byte bytel = 0x9a; // 二 进 制 10011010, 十进制 154 
byte byte2 = Oxdb; // 二 进 制 11011011, 十 进 制 219 
byte result; 


System. Console. WriteLine("bytel = ”+ bytel); 

System, Console, WriteLine("byte2 = " + byte2); 

result = (byte) (bytel & byte2); // 按 位 与 

System. Console. WriteLine("bytel & byte2 = " + result); 
result = (byte)(bytel | byte2); // 按 位 或 

System. Console. WriteLine("bytel | byte2 = " + result); 
result = (byte) (bytel ^ byte2); // 按 位 异 或 

System. Console. WriteLine("bytel ^ byte2 = " + result); 
result = (byte)~bytel; // 按 位 取 反 

System. Console. WriteLine("~bytel = " + result); 
result = (byte)(bytel << 1); // 左 移 

System. Console. WriteLine("bytel <<1 = " + result); 
result = (byte)(bytel >> 1); // 布 移 

System. Console. WriteLine("bytel >1 = " + result); 

} 


上 述 程序 的 输出 如 下 : 


bytel = 154 

bytel = 219 

bytel & byte2 = 154 
bytel | byte2 = 219 
bytel ^ byte2 = 65 
~bytel = 101 
bytel <<1 = 52 
bytel >1 = 77 
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7. 运算 符 的 优先 级 


当 一 个 表达 式 包含 多 个 运算 符 时 ,将 按照 运算 符 的 优先 级 顺序 进行 计算 。 表 4-5 列 出 
了 按照 优先 级 由 高 到 低 的 顺序 分 组 的 C# 运 算 符 ,每 个 组 中 的 运算 符 具 有 相同 的 优先 级 , 优 












































先 级 为 1 的 级 别 最 高 。 
表 4-5 运算 符 的 优先 级 
优先 级 类 别 运 算 符 
hl 基本 (x) x yf(z) az]、z 十 十 .zz 一 一 、new、\typeof sizeof .checked ,unchecked 
2 单 目 十 .一 人 一、 十 十 z、 一 一 z (type)z 
3 乘法 与 除法 *,/.% 
4 加 法 与 减法 + 一 
5 移 位 <<、 
6 关系 和 类 型 检测 | <、>、\< 一 、> 一 \is、as 
7 相等 me 
8 “| 位 与 & 
9 位 异 或 » 
10 “| 位 或 | 
11 “| 逮 辑 与 && 
12 “| 逻辑 或 出 
13 三 元 ?， 
14 “| 赋值 二 、* 二 /= 二,%=, 二 =, 一 =,、<<=、>>=,&= “= ,|= 








在 一 个 复杂 的 表达 式 中 ,具有 高 优先 级 的 运算 符 先 于 低 优先 级 的 运算 符 进行 计算 。 如 
果 表 达 式 包含 多 个 相同 优先 级 的 运算 符 , 则 按照 从 左 到 右 或 从 右 到 左 的 方向 进行 运算 。 例 
如 加 运算 符 是 从 左 到 右 进行 计算 ,而 赋值 运算 符 和 三 元 运算 符 是 从 右 到 左 进行 运算 。 
4.2.3 程序 控制 结构 


在 程序 的 编写 过 程 中 ,通常 要 根据 条 件 的 成 立 与 否 来 改变 代码 的 执行 顺序 ,这 就 需要 使 
用 控制 结构 。C# 的 程序 控制 语句 包括 3 类 , 即 分 支 语句 循环 语句 、 跳 转 语句 。 


1. 分 支 结构 


在 分 支 结构 中 可 以 根据 一 个 条 件 表达 式 的 值 进行 判断 ,并 根据 判断 的 结果 执行 不 同 的 
程序 代码 块 。C# 主要 有 两 个 分 支 结构 ,一 个 是 实现 双向 分 支 的 让 语句 , 另 一 个 是 实现 多 分 


支 的 switch 语句 。 
1) 讶 语句 


让 语句 的 格式 如 下 : 


证 (条 件 ) 
{ 语句 段 1; } 
else 


{ 语句 段 2; } 
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例 4-3 站 语句 示例 (04-03.aspx)。 


< 外 @page language = "C#"%> 
<script language = "C# "runat = "server"> 
void page load(object serder, EventArgs e) { 

int intNowHour; 
intNowHour = DateTime. Now. Hour; 
if (intNowHour <12) labContent1.Text = "Good morning,Cindy!"; 
if (intNowHour = 12) labContent1. Text = "Good noon,Cindy!"; 
if (intNowHour > 12) labContent1.Text = "Good afternoon,Cindy!"; 
b 

</script > 

<html> 

<body> 

<asp:label runat = server id = labContentl1 /><br> 
</body > 
</html > 


上 述 代码 定义 了 一 个 int 型 变量 intrNowHour, 用 于 保存 当前 时 间 的 小 时 数 。 后 面 的 3 
条 站 语句 判定 当前 的 时 间 是 上 午 、 中 午 还 是 下 午 , 并 分 别 给 出 问候 信息 。 
与 JavaScript 相同 ,C# 的 话语 句 也 支持 嵌 套 ,其 嵌 套 形式 如 下 : 


if 条 件 表达 式 1 
{语句 序列 1} 
else if 条 件 表达 式 2 
{ 语 句 序列 2} 


else 


{ 语 句 序列 n+ 1} 


说 明 : 如 果 过 或 else 后 面 有 多 条 语句 ,必须 使 用 大 括号 将 其 括 起 来 。else 必须 与 计 配 
对 使 用 ,每 个 else 只 与 离 它 最 近 的 一 个 尚未 匹配 的 if 配对。 

2) switch 语句 

与 JavaScript 中 的 switch 语句 相同 ,其 语法 格式 如 下 : 


switch (表达 式 ){ 
case 常量 1: 语句 1; break; 
case 常量 2: 语句 2; break; 


case 常量 n: 语句 n; break; 
default: 语句 n+ 1; break; 
} 


例 4-4 ”switch 语句 示例 (04-04. cs)。 
using System; 


class Sample { 
public static void Main() { 
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上 述 程序 的 输出 如 下 : 





2. 循环 结构 


C# 中 的 循环 语句 主要 有 4 种 , 即 while 语句、do-while 语句 \for 语句 foreach 语句 。 
(1) while 语句 : 当 条 件 为 true 时 执行 循环 。 

(2) do-while 语句 : 直到 条 件 为 true 时 执行 循环 。 

(3) for 语句 : 指定 循环 次 数 , 使 用 计数 器 重复 运行 语句 。 

(4) foreach 语句 : 对 于 集合 中 的 每 项 或 数组 中 的 每 个 元 素 重复 执行 。 

1) while 循环 

while 语句 的 格式 如 下 : 





例 4-5 while 循环 (04-05. cs)。 





上 述 程序 的 输出 如 下 : 
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2) do-while 循环 
do-while 语句 的 格式 如 下 : 





例 4-6 do-while 循环 (04-06. cs) 。 





3) for 循环 
for 循环 的 格式 如 下 : 





例 4-7 for 循环 (04-07. cs) 。 





4) foreach 循环 
foreach 循环 通过 一 个 指定 类 型 的 变量 循环 访问 数组 或 集合 中 的 元 素 。 其 基本 语法 
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例 4-8 foreach 循环 (04-08. cs) 。 





该 代码 将 在 页 面 中 显示 : 





3. 跳 转 语句 


常见 的 跳 转 语句 主要 是 break 语句 和 continue 语句 ,其 他 的 有 return 和 goto 语句 。 
1) break 语句 

break 语句 跳出 包含 它 的 switch、while、do,for 或 for-each 语句 。 

例 4-9 break 语句 (04-09. cs)。 





在 上 述 代码 中 ,如 果 没 有 break 语句 , while 循环 不 会 停止 。 在 这 个 程序 中 , 当 i 大 于 
100 时 跳出 循环 ,程序 执行 循环 之 后 的 下 一 个 语句 。 
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2) continue 语句 


continue 语句 用 于 结束 本 次 循环 ,继续 下 一 次 循环 ,但 是 并 不 退出 循环 体 。 
例 4-10 ”break 语句 (04-10. cs)。 














using System; 
class test { 
public static void Main() { 
for(int n=100;n<=200;n++) { 
if(n%3==0) 
cont inue; 
Console. WriteLine(" 从 100 到 200 的 不 能 被 3 整除 的 数 是 {0}", n); 
} 
} 


在 上 述 代码 中 , 当 n 是 3 的 整数 们 时 ,if 语句 中 的 continue 将 被 执行 ,这 样 立即 跳出 本 
次 循环 而 开始 下 一 次 循环 。 


人 3 类 和 对 象 


使 用 类 和 对 象 的 好 处 是 可 以 模型 化 现实 世界 中 的 对 象 , 即 把 对 象 的 属性 和 行为 封装 在 
一 个 类 中 ,这样 可 以 减少 解决 复杂 问题 的 难度 。C# 是 面向 对 象 的 程序 设计 语言 ,典型 的 
C# 应 用 程序 由 程序 员 自 定义 的 类 和 . NET Framework 提供 的 类 组 成 。 


4.3.1 类 和 对 象 的 创建 


类 是 相似 对 象 的 一 个 组 ,类 定义 对 象 的 属性 和 行为 。 类 可 以 认为 是 一 个 模板 ,通过 它 创 
建 了 对 象 。 在 C# 中 属性 保存 在 叫 作 ”* 域 ?的 变量 中 ,行为 则 用 ”方法 "来 描述 ,两 者 都 是 类 的 
员 。 

类 是 一 种 数据 结构 , 它 包含 数据 成 员 ( 变 量 、 域 和 事件 ) 和 函数 成 员 ( 方 法 、 属 性 ,构造 函 
数 和 析 构 函数 )。 类 的 数据 成 员 反 映 类 的 状态 ,而 类 的 函数 成 员 反 映 类 的 行为 。 

如 果 要 创建 一 个 类 ,选择 “文件 >“ 新建 项 目 " 命 令 , 接 着 选择 Visual C# 和 “类 库 ”, 如 
图 4-3 所 示 , 单 击 “ 确 定 ” 按 钮 系统 将 自动 创建 一 个 类 库 的 命名 空间 ClassLibraryl ,并 建立 一 
个 类 文件 Classl. cs。 

在 新 建 的 类 文件 Classl. cs 中 默认 的 内 容 如 下 。 

















using System; 
using System. Collections. Generic; 
using Systenm. Ling; 
using System. Text; 
using System. Threading. Tasks; 
namespace ClassLibraryl { 

public class Classl { 

jl 
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图 4-3 创建 类 


在 上 述 代码 中 使 用 class 关键 字 定义 了 一 个 类 ,类 名 为 Class1。 此 时 可 以 在 类 体 中 定义 
类 的 数据 成 员 和 函数 成 员 。 


1. 类 的 声明 
类 的 定义 格式 如 下 : 


[访问 权限 符 ] class 类 名 [: 基 类 名 ] { 


< 实例 变量 > 
< 方法 > 


} 


在 这 里 [访问 权限 符 ] 定 义 类 的 成 员 被 其 他 类 使 用 的 权限 ,如 表 4-6 所 示 。 


表 4-6 访问 权限 符 

















访问 权限 符 说 明 
public 完全 公开 ,可 以 被 所 有 的 类 所 访问 
internal 内 部 成 员 , 只 有 本 程序 中 的 成 员 能 够 访问 
protected 只 有 该 类 的 派生 类 可 以 访问 ,对 其 他 类 是 隐藏 的 
private 只 有 该 类 的 成 员 可 以 访问 ,任何 其 他 类 (包括 派生 类 ) 都 不 能 访问 


下 面 的 语句 定义 了 一 个 叫 Car 的 类 。 


制 。 
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public class Car { 


// 定义 域 (类 的 数据 成 员 ) 
public string model; 


// 定义 方法 (类 的 函数 成 员 ) 
public void Start() { 
System. Console. WriteLine(model + " started"); 
} 
} 











在 Car 类 的 定义 中 每 个 域 都 有 一 个 访问 权限 符 ,一 般 用 public 声明 ,表示 对 其 存 取 无 限 
方法 也 用 public 定义 ,表示 对 它 的 调用 无 限制 。void 关键 字 表 示 不 返回 值 。 


2. 创建 对 象 


1) 创建 和 访问 对 象 
类 是 创建 对 象 的 模板 ,一旦 创建 了 类 就 可 以 创建 那个 类 的 对 象 。 下 面 的 语句 创建 了 一 





个 Car 对 象 。 


Car myCar; 
myCar = new Car(); 


第 1 个 语句 声明 了 一 个 叫 myCar 的 Car 对 象 的 引用 ,用 来 保存 实际 的 Car 对 象 的 内 存 


地 址 。 第 2 个 语句 在 计算 机 内 存 中 实际 创建 Car 对 象 。new 操作 符 为 Car 对 象 分 配 内 存 ， 
Car() 方 法 创建 对 象 (也 叫 构造 函数 ) 。 


另外 还 有 一 种 简化 的 写法 来 创建 对 象 。 
Car myCar = new Car(); 
访问 对 象 的 域 和 方法 使 用 点 操作 符 (. )。 例 如 : 


myCar.color= "red"; // 给 color 域 赋值 
myCar. Start( ) ; // 调用 方法 Start() 


2) 空 值 
当 定义 一 个 对 象 的 引用 时 ,其 初始 设置 为 null( 也 可 当 作 “ 无 引用 ”), 它 并 不 是 内 存 中 的 





一 个 实际 对 象 。 例 如 下 面 的 语句 声明 了 一 个 myOtherCar 对 象 的 引用 : 


Car myOtherCar; 


在 这 里 myOtherCar 初始 设置 为 null, 它 没有 引用 实际 的 对 象 ( 或 者 说 没有 赋值 ) ,此 时 


下 面 的 行 在 编译 时 会 出 错 。 


System. Console. WriteLine(myOtherCar. model); 














户 也 可 以 把 null 直接 赋 给 一 个 对 象 引 用 。 例 如 : 
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myOtherCar = null; 





它 的 意思 是 myOtherCar 不 再 引用 一 个 对 象 。 程 序 不 能 使 用 
将 在 资源 回收 的 过 程 中 被 移出 内 存 。 
例 4-11 一 个 完整 的 类 的 定义 和 使 用 (04-11. cs)。 


using System; 
public class Car { 


public string model; // 定义 域 
public string color; 

public int yearBuilt; 

public void Start() { // 定义 方法 


System. Console. WriteLine(model + " started."); 
1 
public void Stop() { 
System,. Console, WriteLine(model + " stopped."); 
} 
} 
public class Tester { 
static void Main( ) { 
Car myCar; 
myCar = new Car(); 
myCar. model = "Toyota"; 
myCar. color = "red"; 
myCar. yearBuilt = 2010; 
System. Console. WriteLine( "myCar. model ”+ myCar.model); 
System. Console. WriteLine( "myCar. color " + myCar.color); 
System. Console. WriteLine( "myCar. yearBuilt 
myCar. Start( ); 
myCar. Stop( ); 
} 


// 给 Car 对 象 的 域 赋值 


在 上 述 代码 中 设计 了 一 个 类 Car, 同时 实现 了 主 类 Tester, 这 
程序 运行 的 入 口 。 最 后 这 个 程序 的 输出 如 下 : 

myCar. model = Toyota 
myCar.color = red 
myCar. yearBuilt 
Toyota started. 
Toyota stopped. 


2010 


4.3.2 属性 和 方法 
1. 类 的 数据 成 员 和 属性 


myOtherCar 对 象 ,该 对 象 


// 声明 一 个 叫 myCar 的 Car 对 象 的 引用 
// 创建 car 对象, 将 它 的 内 存 地 址 保存 到 myCar 中 


”+ myCar. yearBuilt); 


里 通过 Main() 函数 定义 





在 声明 类 的 数据 成 员 时 必须 指明 其 访问 级 别 , 默 认 的 访问 级 别 是 private。 若 要 使 某 些 


第 4 章 ”C# 语 言 基 础 a) 


数据 成 员 对 外 公开 ,可 由 属性 来 实现 。 换 句 话 说 ,如 果 类 的 数据 成 员 声 明 为 public, 则 用 户 
可 以 在 程序 中 直接 、 任 意 地 访问 该 成 员 ,导致 类 之 间 出 现 紧 耦 合 。 克 服 这 一 问题 的 方法 是 定 
义 私有 的 成 员 , 再 定义 公有 的 属性 ,对 其 提供 get 和 set 访问 。 
属性 的 定义 通过 get 和 set 关键 字 来 实现 ,get 用 来 定义 读 取 属 性 时 的 操作 ,set 用 来 定 
义 设置 属性 时 的 操作 。 
























































请 看 下 面 的 代码 : 
public class Car { 
private string model; // 私有 的 数据 成 员 
public string color; 
public string Model { // 公有 的 属性 
get { return model; } // 获取 属性 (提供 读 的 权限 ) 


set { return model = value ; } // 设置 属性 (提供 写 的 权限 ) 
} 


如 果 一 个 属性 同时 具备 了 get 和 set 操作 , 则 该 属性 为 读 / 写 性 质 的 属性 ; 如 果 只 有 set 
操作 , 则 为 只 写 属性 ; 如 果 只 有 get 操作 , 则 为 只 读 属性 。 


2. 类 的 方法 


方法 是 执行 一 个 任务 的 一 组 语句 。 在 声明 方法 时 需要 指定 访问 权限 、 返 回 值 类 型 .使 用 
的 参数 等 。 方 法 通过 return 语句 返回 值 。 如 果 没 有 返回 值 , 则 使 用 void 关键 字 。 

1) 方法 的 定义 

声明 方法 的 语句 如 下 : 


[访问 权限 符 ] [返回 值 类 型 ] 方法 名 (参数 列表 ) 
{ 方法 体 } 


在 前 面 定义 的 Car 类 中 只 有 两 个 无 返回 值 的 start() 和 stop() 方 法 ,下 面 的 代码 定义 了 
个 带 返回 值 的 Age() 方 法 。 


public class Car { 
public int yearBuilt; 
public int Mge(int currentYear) { // Age( ) 方 法 计算 并 返回 Car 的 已 使 用 年 限 
int age = currentYear — yearBuilt; 
return age; 


} 


2) 方法 的 重 载 

通过 方法 的 重 载 可 以 在 类 中 定义 方法 名 相同 而 参数 不 同 的 方法 。 参 数 不 同 指 的 是 参数 
的 个 数 不 同 或 参数 的 类 型 不 同 。 当 一 个 重 载 方法 被 调用 时 C# 会 根据 调用 该 方法 的 参数 自 
动 调用 具体 的 方法 来 执行 。 

注意 ,在 C# 中 方法 的 重 载 不 关心 返回 值 。 也 就 是 说 C# 不 允许 在 一 个 类 中 存在 两 个 
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方法 名 和 参数 列表 相同 但 返回 值 不 同 的 方法 。 
例 4-12 方法 的 重 载 (04-12. cs) 。 





using System; 
class Overload{ 
public void show() { 
Console. WriteLine( "nothing" ); 
} 
public void show( int x ) { 
Console. WriteLine( x ); 
} 
public void show( string x, stringy){ 
Console. WriteLine( x, y ); 
} 
public static void Main( string[] args ) { 
Overload myOverload = new Overload( ) ; 
myOverload, show( ) ; 
myOverload, show( 3); 
myOverload, show( "hello", "world"); 
} 
} 


在 上 面 代 码 中 ,第 1 个 方法 show() 没 有 参数 ,第 2 个 方法 show() 有 一 个 int 型 参数 ,第 
3 个 方法 show() 有 两 个 string 型 参数 。 

上 面 程序 的 运行 结果 如 下 : 

nothing 


号 
hello 


4.3.3 构造 函数 和 析 构 函数 

构造 函数 在 类 创建 时 自动 执行 (使 用 new 语句 时 ), 析 构 函 数 在 销毁 类 的 时 候 自动 
执行 。 

1. 构造 函数 


类 的 构造 函数 是 这 样 一 种 机 制 : 用 户 通过 它 可 以 在 创建 类 的 对 象 时 赋予 数据 成 员 的 
值 。 构 造 函 数 是 一 种 特殊 的 类 成 员 函 数 , 与 类 名 相同 ,但 不 能 有 返回 值 。 

构造 函数 用 于 执行 类 的 实例 的 初始 化 。 每 个 类 都 提供 一 个 默认 的 构造 函数 。 

在 使 用 构造 函数 时 请 用 户 注意 以 下 几 个 问题 : 

(1) 一 个 类 的 构造 函数 通常 与 类 名 相同 。 

(2) 构造 函数 不 声明 返回 类 型 。 

(3) 构造 函数 总 是 public 类 型 的 。 

(4) 构造 函数 可 以 重 载 。 
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例 4-13 ”构造 函数 (04-13. cs) 。 


using System; 
class Point { 
public double x, y; 
public Point() { 
this.x = 0; 
this.y = 0; 
} 
public Point(double x, double y) { 
this.x = x; 
this yr = yy 
} 
class Test { 
static void Main() { 
Point a 
Point b 
} 
| 


new Point( ); 


new Point(3, 4); // 用 构造 函数 初始 化 对 象 


上 述 代 码 声明 了 一 个 类 Point, 它 提供 了 两 个 重 载 的 构造 函数 ,一 个 是 Point() 函 数 , 另 
一 个 是 Point(double x，double y) 函数 。 如 果 类 中 没有 提供 这 些 构造 函数 ,那么 C# 会 自动 
创建 一 个 默认 的 构造 函数 。 


2. 析 构 函数 


析 构 函数 是 实现 销毁 一 个 类 的 实例 的 方法 成 员 。 析 构 函 数 不 能 有 参数 ,不 能 加 任何 修饰 
符 而 且 不 能 被 调用 。 由 于 析 构 函数 的 目的 与 构造 函数 相反 ,加 前 缀 "一 ”以 示 区 别 。 虽 然 C# 
提供 了 一 种 新 的 内 存 管 理 机 制 自动 内 存 管理 机 制 (Automatic memory management ) ， 
资源 的 释放 是 可 以 通过 “垃圾 回收 器 ”自动 完成 的 ,一 般 不 需要 用 户 干预 ,但 在 有 些 特殊 情况 
下 还 是 需要 用 到 析 构 函数 的 ,例如 在 C# 中 非 托 管 资源 的 释放 。 

下 面 使 段 代 码 来 表示 析 构 函数 是 如 何 使 用 的 : 

















public class ResourceHolder { 


一 ResourceHolder() { 
// 这 里 是 清理 非 托管 资源 的 用 户 代码 段 


以 下 的 例子 综合 使 用 了 构造 函数 和 析 构 函数 。 
例 4-14 ”构造 函数 和 析 构 函数 (04-14. cs) 。 
using System; 


class Desk { 


public Desk() { // 构造 函数 和 类 名 一 样 
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Console. WriteLine("Constructing Desk"); 
weight = 6; 
high= 3; 
width= 7; 
length= 10; 
Console. WriteLine("{0}, {1},{2}, {3}", weight, high, width, length); 
} 
一 Desk() { // 析 构 函数 ,前 面 加 一 
Console. WriteLine("Destructing Desk "); 
} 
protected int weight, high, width, length; 
public static void Main() { 
Desk aa = new Desk( ); 
Console. WriteLine("back in main() "); 
} 
}; 


4.3.4 继承 和 多 态 
1. 类 的 继承 性 (inheritance) 


继承 的 机 制定 义 了 类 与 类 之 间 的 父子 关系 。 父 类 又 称 基 类 (base class) , 子 类 又 称 派生 
类 (derived class) , 父 类 和 子 类 之 间 形 成 了 继承 的 层次 体系 。 

在 C# 中 ,派生 类 从 它 的 直接 基 类 中 继承 成 员 ,例如 方法 、. 域 .属性 .事件 .索引 指 示 咒 。 
除了 构造 函数 和 析 构 函数 以 外 ,派生 类 隐 式 地 继承 了 直接 基 类 的 所 有 成 员 ,并 在 此 基础 上 进 
行 局 部 更 改 或 扩充 。 

下 面 通过 一 个 例子 来 认识 基 类 与 派生 类 的 继承 关系 。 

例 4-15 类 的 继承 (04-15. cs) 。 


using System; 


class Vehicle { // 定义 汽车 类 
int wheels; // 定义 公有 成 员 ( 轮 子 个 数 ) 
protected float weight; // 定义 保护 成 员 ( 重 量 ) 
public Vehicle(){ ; } // 构造 函数 
public Vehicle( int w, float g) { // 重 载 的 构造 函数 
wheels = w; 
weight = g; 
} 


public void Speak() { 
Console. WriteLine("the w vehicle is speaking! "); 
} 
jy 


class Car:Vehicle { // 定义 轿车 类 , 即 汽车 类 的 派生 类 
int passengers; // 定义 私有 成 员 ( 乘 客 数 ) 
public Car (int w, float g, int p) :base(w,g) { // 使 用 base 保留 字 代表 基 类 成 员 
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Wheels = Wi 
weight = g; 
passengers = p; 
4 
class Test { 
public static void Main( string[] args ) { 
Car myCar = new Car(); 
myCar. Speak (); } 
' 


在 上 述 代码 中 Vehicle 作为 基 类 体现 了 汽车 实体 具有 的 公共 性 质 一 一 汽车 都 有 轮子 和 
重量 。Car 类 继承 了 Vehicle 的 这 些 性 质 并 且 添 加 了 自身 的 特性 一 一 搭载 的 乘客 数 。 

C# 中 的 继承 符合 下 列 规则 : 

(1) 继承 是 可 传递 的 ,如 果 A 是 基 类 ,B 从 A 中 派生 ,C 从 B 中 派生 ,那么 C 不 仅 继承 
了 B 中 声明 的 成 员 , 同 样 也 继承 了 A 的 成 员 ,Object 类 作为 所 有 类 的 基 类 。 

(2) 派生 类 是 对 基 类 的 扩展 , 它 可 以 添加 新 的 成 员 , 但 不 能 除去 已 继承 的 成 员 的 定义 。 

(3) 构造 函数 和 析 构 函数 不 能 被 继承 。 

(4) 派生 类 如 果 定 义 了 与 继承 而 来 的 成 员 同 名 的 新 成 员 ,就 可 以 覆盖 已 继承 的 成 员 。 

2. 类 的 多 态 性 (Polymorphism) 

通过 继承 实现 的 不 同 对 象 调用 相同 的 方法 表现 出 不 同 的 行为 , 称 为 多 态 。 

C# 支持 两 种 类 型 的 多 态 性 , 即 编译 时 的 多 态 和 运行 时 的 多 态 。 

(1) 编译 时 的 多 态 是 通过 重 载 实现 的 ,如 方法 重 载 和 操作 符 重 载 。 

(2) 运行 时 的 多 态 是 直到 系统 运行 时 才 根 据 实际 情况 决定 实现 何 种 操作 。 

编译 时 的 多 态 性 为 用 户 提供 了 运行 速度 快 的 特点 ,而 运行 时 的 多 态 性 则 带 来 了 高 度 灵 
活 和 抽象 的 特点 。 


人 4 字符 串 


4.4.1 使 用 字符 串 


在 程序 中 经 常 需要 存储 一 系列 的 字符 ,通常 使 用 Unicode 格式 的 字符 串 来 描述 字符 。 
Unicode 为 世界 上 绝 大 多 数 书 写 语言 编码 的 标准 , 它 使 用 16 位 来 表示 一 个 单词 。 


1. 创建 字符 串 








下 面 的 语句 创建 了 一 个 叫 myString 的 字符 串 : 





string myString = "Hello World"; 
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2. string 类 的 属性 和 方法 























字符 串 实际 上 是 System. String 类 的 对 象 ,可 以 在 程序 中 使 用 其 包含 的 属性 和 方法 来 
操作 字符 串 。 表 4-7 给 出 了 string 类 的 属性 和 方法 。 
表 4-7 string 类 的 属性 和 方法 
属性 或 方法 描 述 
Chars 属性 字符 串 索引 器 ,获取 当前 string 对 象 中 位 于 指定 字符 位 置 的 字符 
Length 属性 字符 串 中 的 字符 个 数 ( 只 读 ) 
Clone() 返回 对 此 string 实例 的 引用 





Compare(string, string) 


比较 两 个 字符 串 








CompareOrdinal(string, string) 


通过 计算 每 个 字符 串 中 字符 的 数值 来 比较 两 个 string 对 象 








Compare(string，string) 


比较 两 个 指定 的 字符 串 ,并 返回 一 个 整数 





CompareTo( Object) 


将 此 实例 与 指定 的 Object 进行 比较 





Concat(string, string, string) 





连接 一 个 或 多 个 字符 串 ,构建 一 个 新 字符 串 





stringl. Contains(string2) 


判断 字符 串 string2 是 否 出 现在 字符 串 stringl 中 ,返回 一 个 布尔 值 





Copy(Cstring) 


复制 一 个 字符 串 string 





EndsWith(string) 


确定 字符 串 的 结尾 是 否 与 指定 的 字符 串 匹 配 





Equals(string, string) 





判断 两 个 字符 串 是 否 相等 





Format(string, Object) 


格式 化 字符 串 , 即 将 字符 串 string 的 每 项 按 Object 的 对 应 项 替换 





IndexOf(char) 


报告 指定 字符 char 在 字符 串 中 第 一 次 出 现 处 的 索引 





Insert (int, string) 


在 字符 串 的 指定 起 始 位 置 (int) 插 入 一 个 指定 的 string 实例 





Intern(string) 


检索 系统 对 指定 string 的 引用 





IsInterned() 


返回 一 个 对 指定 string 的 引用 





Join(string, string[ ]) 


串联 字符 串 数 组 的 所 有 元 素 ,在 每 个 元 素 之 间 使 用 指定 的 分 隔 符 





LastIndexOf(char) 


报告 指定 字符 或 字符 串 在 此 字符 串 中 最 后 出 现 处 的 索引 





Normalize() 


返回 一 个 新 字符 串 , 其 二 进 制 表示 形式 符合 特定 的 Unicode 范式 





返回 一 个 新 字符 串 ,该 字符 串通 过 在 字符 左 侧 填充 空格 来 达到 指定 











PadLeft(int32) 
的 总 长 度 ,从 而 实现 右 对 齐 

PadRight Cint32) 返回 一 个 新 字符 串 ,该 字符 串通 过 在 此 字符 串 中 的 字符 右 侧 填充 空 
格 来 达到 指定 的 总 长 度 , 从 而 使 这 些 字符 左 对 齐 

Remove(int32) 从 当前 字符 串 中 删除 指定 数量 的 字符 ,并 返回 新 字符 串 





Replace(char, char) 


在 当前 字符 串 中 用 指定 字符 (或 字符 串 ) 替换 另 一 个 字符 (或 字符 
串 ) ,返回 新 字符 串 





返回 的 字符 串 数 组 包含 此 实例 中 的 子 字符 串 ( 由 指定 Unicode 字符 
































SplitCchar[]) 2 

数组 的 元 素 分 隔 ) 
Starts With(string) 确定 字符 串 的 开头 是 否 与 指定 的 字符 串 string 匹配 
Substring(int32) 从 指定 的 字符 位 置 开 始 检索 一 个 子 字符 串 
ToCharArray() 从 当前 字符 串 复制 字符 到 一 个 字符 数组 
ToLower() 字符 串 转 换 为 小 写 形式 
ToUpper() 字符 串 转换 为 大 写 形 式 
Tostring() 将 此 实例 的 值 转换 为 string 





Trim() 或 Trim(char[ ]) 


对 象 的 开始 和 结尾 移 除 所 有 的 空格 或 一 组 指定 字符 





TrimEnd() 


功能 与 Trim() 类 似 , 但 仅 移 除 尾部 的 所 有 空格 或 指定 字符 





TrimStart() 





功能 与 Trim() 类 似 , 但 仅 移 除开 头 的 所 有 空格 或 指定 字符 
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下 面 简单 介绍 几 个 最 常用 的 属性 和 方法 。 
1) 使 用 Length 属性 从 字符 串 中 读 取 单个 字符 
string 类 有 一 个 Length 属性 ,表示 字符 串 中 的 字符 个 数 ,返回 一 个 int 值 。 
通过 指定 一 个 字符 在 字符 串 中 的 位 置 (字符 索引 从 0 开始 ) 从 字符 串 中 读 取 单个 字符 。 
例如 ,myString 字符 串 被 设置 为 "Hello World" , 则 myString[0] 为 H。 
下 面 的 语句 使 用 一 个 for 循环 来 读 取 一 个 字符 串 的 全 部 字符 。 
























































for (int count = 0; count <myString.Length; count++) { 
Console. WriteLine("myString[" + count + "] = " + myString[count]); 
} 


2) 使 用 ToString() 方 法 把 数据 转换 成 字符 串 

ToString 方法 可 以 应 用 于 任何 . NET Framework 提供 的 数据 类 型 ,将 之 转换 成 字符 
串 。 一 般 来 说 ,数据 类 型 在 转换 时 都 是 直接 使 用 ToString () 方 法 ,不 带 任何 参数 。 但 
DateTime 类 型 除外 , 它 需 要 在 ToString() 中 添加 参数 以 选择 输出 日 期 的 格式 。 此 外 ,数字 
要 想 格式 化 输出 也 要 添加 参数 。 

例如 : 





int age = 25; 
string strAge = age.ToString(); // 整 型 转换 成 字符 串 


(1) 使 用 ToString 方法 格式 化 数字 : 常用 的 参数 及 其 含义 如 下 。 
。 Ce: 货币 ,可 指定 小 数 点 后 的 位 数 。 

。 下 f: 定点 记 数 法 ,指定 小 数位 的 位 数 。 

。X: 十 六 进 制 。 


例如 : 

double a= 17688.658 

string str = a.ToString("C") // 返回 站 17688.658 
str = a. ToString("C2") // 返回 站 17688.65 
str = a. ToString("F2") // 返回 ?17688.65 











(2) 使 用 ToString 方法 格式 化 日 期 和 时 间 : 常用 的 参数 及 其 含义 如 下 。 
。D: 长 日 期 ; d: 短 日 期 。 

。 工 : 长 时 间 ; t: 短 时 间 。 

。 下 : 长 日 期 和 时 间 ; f: 短 日 期 和 时 间 。 





。 Mm: 月 和 日 。 
蛙 Yy: 月 和 年 。 
例如 : 


DateTime dt = DateTime.Now 
t=dt.ToString("D") // 返回 Thursday, September 22,2011 
t=dt.ToString("d") // 返回 9/22/2011 
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t=dt.ToSstring("T") // 返回 9:32:34 MM 
t=dt.ToString("t") // 返回 9:32 AM 
t=dt.ToString("f ") // 返回 Thursday, September 22,2011 9:26 PM 


t=dt.ToString("yyyy 年 MM 月 dd 日 ")  // 返回 2011 年 09 月 22 日 











3) 使 用 Compare() 方 法 比较 两 个 字符 串 




















使 用 Compare() 方 法 的 语法 格式 如 下 :; 











string. Compare( stringl, string2 ) 


在 这 里 stringl 和 string2 是 要 比较 的 字符 串 ,分 别 返回 一 个 int 值 1.0、 一 1 来 指明 第 一 
个 字符 串 大 于 ,等 于 或 小 于 第 二 个 字符 叫 。 例 如 : 


int resultl = String.Compare("bbc","abc"); 
int result2 = String.Compare("abc", "bbc"); 





// Compare() 返 回 1 
// compare() 返 回 -1 


如 果 要 在 比较 中 考虑 字符 串 的 大 小 写 , 可 以 使 用 以 下 语法 : 


string. Compare( stringl, string2, ignoreCase ) 


在 这 里 ignoreCase 是 一 个 bool 值 。 如 果 设 置 为 true( 默 认 值 ), 则 无 须 考虑 字符 串 的 大 
小 写 ; 如 果 被 设置 为 false, 在 比较 时 要 考虑 大 小 写 。 例 如 : 


int resl = string.compare("bbc", "BBC", true ); // 忽略 大 小 写 ,Compa re() 返 回 0 
int res2 = string.compare("abc", "BBC", false); // 考虑 大 小 写 , Compare( ) 返 回 一 1 


4) 连接 字符 串 


(1) 使 用 Concat() 方 法 连接 字符 串 : 使 用 静态 的 Concat() 方 法 可 以 把 字符 串 连 接 起 
来 。 该 方法 返回 一 个 新 的 字符 串 , 即 把 后 面 的 字符 串 添加 到 前 一 个 字符 串 的 末尾 。Concat() 


是 可 以 重 载 的 ,最 简单 的 语法 如 下 : 
string. Concat (stringl, string2) 
在 这 里 stringl 和 string2 是 想 连 接 在 一 


字符 串 。 
请 看 下 面 的 例子 : 


string myString4 = string.Concat("Friends, 








紧 的 字符 串 。Concat() 中 的 参数 也 可 以 是 3 个 


", "Romans" ); 


// 字符 串 "Friends,Romans" 将 存储 在 myString4 中 


string myString5 = string.Concat("Friends, 


", "Romans," , "and countrymen"); 


// 字符 串 "Friends, Romans and countrymen" 将 存储 在 myString5 中 
































载 的 加 运算 符 来 连接 字符 串 : 


用 户 也 可 以 使 用 重 载 的 加 运算 符 ( 十 ) 来 连接 





符 是 
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string myString6 = "To be, " + "or not to be"; 


字符 串 "To be, or not to be" 将 存储 在 myString6 中 。 
5) 检查 两 个 字符 串 是 否 相 等 
(1) 使 用 EqualsQ 〇 方法 检查 两 个 字符 串 是 否 相 等 : 使 用 Equals() 方 法 可 以 检查 两 个 字 










































































是 否 相等 ,返回 一 个 布尔 值 。 它 有 两 种 格式 : 一 个 是 在 string 类 中 调用 Equals() 的 静 
态 版 本 ; 一 个 是 通过 使 用 实际 的 字符 串 来 进行 比较 的 实例 版 本 。 其 格式 如 下 : 
string. Equals(stringl, string2) // 静态 版 本 
stringl, Equals( string2) // 实例 版 本 


(= 
同 ， 


其 中 的 stringl 和 string2 是 想 要 比较 的 两 个 字符 串 。 
在 下 面 的 例子 中 ,mystringl 和 mystring2 是 想 要 比较 的 两 个 字符 串 。 


bool boolResult = string.Equals("bbc" , "bbc"): 
boolResult = mystringl.Equals(mystring2); 


(2) 使 用 重 载 的 等 运算 符 来 检查 两 个 字符 串 是 否 相 等 : 用 户 可 以 使 用 重 载 的 等 运算 符 
三 ) 来 检查 两 个 字符 串 是 否 相等 。 在 下 面 的 例子 中 ,因为 myString 和 myString2 内 容 不 
boolResult 被 设置 为 false。 


boolResult = myString = = myString2; 


例 4-16 字符 串 使 用 示例 (04-16. cs)。 


namespace Programming_ CSharp { 
using System; 
public class StringTester { 
static void Main() { 
string sl = "abcd"; 
string s2 = "ABCD"; 
string s3 = "Liberty Associates, Inc. provides custom .NET development, on— site Training 
and Consulting"; 
int result; // 保存 比较 结果 


result = string.Compare(sl, s2); // 比较 两 个 字符 串 , 区 分 大 小 写 
Console. WriteLine( "compare sl: {0}, s2: {1}, result: {2}\n", sl, s2, result); 








result = string.Compare(sl,s2, true); // 重 载 Compare 方法 ,不 区 分 大 小 写 
Console. WriteLine("compare insensitive\n"); 
Console. WriteLine("s4: {0}, s5: {1}, result: {2}\n",sl, s2, result); 


string s6 = string.Concat(s1,s2); // 字符 串 的 连接 
Console. WriteLine("s6 concatenated from sl and s2: {0}", s6); 


string s7 = sl + s2; // 重 载 操作 符 + 
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Console. WriteLine("s7 concatenated from sl + s2: {0}", s7); 


string s8 = string.Copy(s7); // 字符 串 的 复制 
Console. WriteLine("s8 copied from s7: {0}", s8); 


string s9 = s8; // 使 用 重 载 后 的 操作 符 


Console. WriteLine("s9 = s8: {0}", s9); 

// 使 用 3 种 方法 进行 比较 

Console. WriteLine("\nDoes s9. Equals(s8)?: {0}",s9.Equals(s8)); 
Console. WriteLine("Does Equals(s9, s8)?: {0}", string. Equals( s9, s8) 
Console. WriteLine( "Does s9 == s8?: {0}", s9 == s8); 


); 


Console. WriteLine("\nString s9 is {0} characters long. ", s9. Length);// 长 度 属性 


Console. WriteLine( "The 5th character is {1}\n", s9. Length, s9[4]); 
Console. WriteLine("\nThe first occurrence of Training "); 
Console. WriteLine ("in s3 is {0}\n",s3. IndexOf("Training")); 


// 索引 属性 
// 返回 子 串 的 索引 值 


string s10 = s3. Insert(67, "excellent "); // 在 "training" 之 前 插入 单词 excellent 


Console, WriteLine("s10: {0}\n", s10); 
} 
} 


上 述 代 码 的 输出 结果 如 下 : 


compare sl: abcd, s2: ABCD, result: -1 
compare insensitive 

s4: abcd, s5: ABCD, result: 0 

s6 concatenated from sl and s2: abcdABCD 
s7 concatenated from sl + s2: abcdABCD 
s8 copied from s7: abcdABCD 

s9 = s8: abcdABCD 

Does s9.Equals(s8)?: True 

Does Equals(s9, s8)?: True 

Does s9 == s8?: True 

String s9 is 8 characters long. 

The 5th character is A 

The first occurrence of Training 

in s3 is 67 


s10: Liberty Associates, Inc. provides custom . NET development，on - site excellent Training 


and Consulting 


4.4.2 创建 动态 字符 串 


使 用 System. Text. StringBuilder 类 可 以 创建 动态 字符 
串 不 同 ,动态 字符 串 的 字符 可 以 被 直接 修改 。string 对 象 是 不 可 改变 的 
的 副本 。 每 次 使 用 System. String 类 中 的 方法 时 都 要 在 内 存 中 新 建 





ur 


























下 





























。 和 string 对 象 的 一 般 字符 


:修改 的 总 是 字符 串 
个 string 对 象 ,这 就 





需要 为 新 对 象 分 配 空间 ,增加 了 系统 开销 。 如 果 要 修改 字符 串 而 不 创建 新 的 对 象 , 则 可 以 使 




















因此 , 当 进行 频繁 的 字符 呈 
string 类 在 效率 上 高 很 多 。 
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System. Text. StringBuilder 类 提升 性 能 。 

















和 操作 或 操作 很 长 的 字符 串 时 使 用 StringBuilder 类 比 使 











1. 创建 StringBuilder 对 象 


下 面 的 语句 创建 了 一 个 叫 mysb 的 StringBuilder 对 象 。 


StringBuilder mysb = new StringBuilder(); 


在 默认 情况 下 ,StringBuilder 对 象 初始 最 多 可 存储 16 个 字符 ,但 随 着 加 入 对 象 ,其 容量 
将 自动 增加 。 用 户 可 以 通过 构建 函数 传递 一 个 int 参数 来 指定 StringBuilder 对 象 的 初始 容 
量 ; 或 者 传递 两 个 int 参数 ,分 别 指定 初始 容量 和 最 大 容量 。 


例如 : 


int capacity 
StringBuilde: 


StringBuilde: 


=50; 
r mysbl 


r mysb2 


= new StringBuilder(capacity); // 指定 初始 容量 
int maxCapacity = 100; 
= new StringBuilder(capacity, maxCapacity); // 最 大 容量 


StringBuilder 对 象 的 最 大 容量 是 2 147 483 647( 这 也 是 StringBuilder 对 象 的 默认 容量 )。 
用 户 可 以 通过 传递 一 个 字符 串 给 构建 函数 来 设置 StringBuilder 对 象 的 初始 字符 串 : 


string myStr 
StringBuilde: 


= "To be or not to be"; 


r mysb3 


= new StringBuilder(myStr); 


2. 使 用 StringBuilder 对 象 的 属性 和 方法 
er 类 提供 了 许多 属性 和 方法 ,如 表 4-8 和 表 4-9 所 示 。 


StringBuild 


表 4-8 StringBuilder 类 的 属性 









































属 性 类 型 描 述 
Capacity int 获取 或 设置 StringBuilder 对 象 中 可 以 存储 的 最 大 字符 数 
Length int 获取 或 设置 StringBuilder 对 象 中 的 字符 数 
MaxCapacity int 获取 StringBuilder 对 象 的 最 大 容量 

表 4-9 StringBuilder 类 的 方法 
方 ”法 返回 类 型 描 述 
Append() StringBuilder | 在 StringBuilder 对 象 的 结尾 处 添加 字符 串 
AppendFornat() StringBuilder | 在 StringBuilder 对 象 的 结尾 处 添加 格式 化 字符 串 
| 确定 StringBuilder 对 象 的 当前 容量 至 少 等 于 一 个 特定 值 , 并 返回 
一 个 int 值 , 其 中 包括 StringBuilder 对 象 的 当前 容量 

Equals() bool 返回 布尔 值 ,指定 StringBuilder 对 象 是 否 等 于 一 个 特定 对 象 
GetHashCode() int 返回 类 型 的 int 型 哈 希 码 
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续 表 
方 法 返回 类 型 描 述 
GetType() Type 返回 当前 对 象 的 类 型 
Insert() StringBuilder | 在 StringBuilder 对 象 的 指定 位 置 插入 字符 串 
Remove() StringBuilder | 从 StringBuilder 对 象 的 指定 位 置 开 始 删除 特定 数目 的 字符 
- 在 StringBuilder 对 象 中 用 字符 串 或 字符 代替 出 现 的 所 有 字符 串 或 
Replace() StringBuilder 
字符 
ToString() string 将 StringBuilder 对 象 转换 为 一 个 字符 串 





可 以 看 到 ,操作 动态 字符 串 的 方法 比 操作 一 般 字 符 串 的 方法 少 。 
以 下 语句 是 错误 的 ， 


StringBuilder sb = "hello world!"; 


sb = "change the 


下 面 来 看 几 个 合法 的 语句 : 


content"; 


// 不 合法 ,不 能 这 样 初始 化 一 个 字符 串 


// 不 合法 ,不 能 直接 把 string 转换 成 StringBuilder 


StringBuilder sb = new StringBuilder("Hello World! ");// 初始 化 字符 串 sb 
sb. Insert(6，"Beautiful "); 
Console,WriteLine( sb); 


sb. Remove( 0, sb. 


. Length); 


// 将 字符 串 "Beautiful "添加 到 当前 指定 位 置 
// 输出 "Hello Beautiful World! " 


sb. Append( "Test for string change! "); 


int myInt = 25; 


sb. AppendFormat("...{0:C} ", myInt); 


// 移 除 整个 字符 串 
// 追加 一 个 新 字符 串 


// 将 一 个 货币 值 整数 放 到 StringBuilder 的 末尾 


StringBuilder 类 还 有 一 个 特性 , 它 的 Length 属性 不 是 ReadOnly( 只 读 ) 的 ,可 以 手动 设 


这 


StringBuilder mysb = new StringBuilder("12345"); 


mysb. Length= 7; 


Console. WriteLine( "mysb( len=7): {0}\n", mysb); 


mysb. Length= 3; 


Console. WriteLine("mysb( len = 3): {0}\n", mysb); 


.5 集合 编程 


合 是 C# 中 的 一 个 了 





要 的 数据 组 成 形式 ,通过 集合 可 以 将 数据 存储 于 民 


而 在 String 类 中 ,Length 属性 是 ReadOnly 的 。 有 这 样 一 组 语句 : 


// 初始 化 一 个 字符 串 mysb 


// 改变 mysb 的 Length 属性 


// 输出 mysb 的 内 容 为 "12345 " 


// 输出 mysb 的 内 容 为 "123" 














中 ,六 


通过 集 





合 提供 的 特性 对 数据 进行 索引 、 取 值 、 排 序 等 操作 。System. Collections 命名 空间 包含 这 样 


一 些 集合 类 ,如 ArrayList\ 哈 希 表 、 字 典 , 堆 栈 、 队 列 等 ， 


时 提供 了 很 多 灵活 的 方法 来 操作 和 存 取 元 素 。 


4.5.1 Ar 


rayList 














其 对 象 创建 以 后 还 可 以 改变 容量 , 同 


ArrayList 是 System. Collections 命名 空间 的 一 部 分 。ArrayList 可 以 理解 为 一 种 特殊 
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的 数组 , 它 与 数组 (Array) 相 似 , 都 用 于 存储 一 组 有 序 的 数据 元 素 。 但 由 于 数组 本 身 需 要 固 
定 的 长 度 , 如 果 向 其 中 增加 元 素 则 可 能 抛 出 异常 ,所 以 数组 不 够 灵活 。 

ArrayList 集合 可 以 动态 地 添加 或 删除 所 存储 的 元 素 。 使 用 整数 索引 可 以 访问 
ArrayList 集合 中 的 元 素 ,集合 中 的 索引 从 0 开始 。 

在 创建 一 个 ArrayList 集合 对 象 时 不 用 定义 其 大 小 。ArrayList 有 一 个 属性 Capacity, 表 示 
集合 的 容量 , 即 能 够 存储 的 最 多 元 素 个 数 。ArrayList 集合 的 默认 初始 容量 为 16, 当 添加 第 
17 个 元 素 时 其 容量 自动 翻 倍 到 32。 用 户 可 以 手工 设置 Capacity, 其 值 应 该 大 于 或 等 于 元 素 个 
数 ,如 果 设 置 的 值 小 于 元 素 个 数 , 则 程序 将 抛 出 一 个 异常 ArgumentOutOfRangeException 。 

创建 一 个 ArrayList 对 象 可 以 使 用 以 下 方法 : 





















































ArrayList myArrayList = new ArrayList(); 





使 用 Add() 方 法 可 以 给 ArrayList 增加 一 个 元 素 , 并 把 新 元 素 添加 到 ArrayList 的 末 
尾 。 下面 的 代码 给 myArrayList 增加 了 两 个 字符 串 。 


myRrrayList,Rdd("Hello ") 
myArrayList, Add( "World ") 


用 户 可 以 使 用 Count 属性 来 获取 存储 在 ArrayList 中 的 元 素 个 数 。 在 读 取 ArrayList 
中 的 元 素 时 可 以 在 for 循环 中 使 用 Count 属性 。 例 如 : 


for (int i=0; i<myArrayList. Count; i++) { 
Console. WriteLine(myArrayList[counter]); 
} 


例 4-17 ArrayList 示例 (04-17. cs) 。 


using System; 
using System. Collections; 
public class Employee { // 定义 一 个 类 Employee 
public Employee( int empID) { this.empID = empID; }// 构造 函数 
public override string ToString( ) { return empID. ToString( ); } 
public int EmpID { 
get { return empID; } 
set { empID = value; } 
private int empID; 
} 
public class Tester { 
static void Main( ) { 
ArrayList empArray = new ArrayList( ); 
ArrayList intArray = new ArrayList( ); 
for (int i = 0;i<5;i++) { // 构造 intArray 和 empArray 集合 中 的 元 素 
empArray. Add( new Fmployee(i+100)); 
intArray. AMdd( ix 5); 
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for (int i = 0;i<intArray.Count;i++) { // 打印 intArray 集合 的 全 部 内 容 
Console. Write("{0} ", intArray[i].ToString( )); 

上 

Console. WriteLine("\n"); 

for (int i = 0;1<empRrray.Count;i++) { // 打印 empArray 集合 的 全 部 内 容 
Console. Write("{0} ", empArray[ i]. ToString( )); 

上 

Console. WriteLine("\n"); 

Console. WriteLine("empArray. Capacity: {0}", empArray. Capacity); 


上 面 程序 的 输出 结果 如 下 : 
0 5105020 


100 101 102 103 104 
empArray. Capacity: 16 


4.5.2 哈 希 表 


哈 希 表 (Hash Table) 表 示 一 个 关键 码 (Key) 和 值 (Value) 相 关联 的 集合 ,也 就 是 说 在 哈 
希 表 中 每 一 个 关键 码 都 与 一 个 值 相 对 应 , 即 Key-Value 对 。 这 就 好 像 字典 一 样 , 字 典 中 的 单 
词 相 当 于 关键 码 (Key) ,对 应 的 单词 定义 就 是 值 (Value)。 

建立 一 个 哈 希 表 可 以 使 用 以 下 方法 : 


Hashtable myHashtable = new Hashtable(); 


1. 添加 元 素 
向 哈 希 表 中 增加 “Key-Value” 对 可 以 使 用 Add() 方 法 。 
myHashtable. Add( "cn", "China" ); 


myHashtable. Add( "hk", "Hongkong" ); 
myHashtable. Add( "ca", "Canada"); 

















Add() 方 法 的 第 一 个 参数 是 关键 码 , 第 二 个 参数 是 值 。 但 在 添加 元 素 时 如 果 使 用 了 重 
复 的 关键 码 , 则 会 给 出 一 个 异常 ArgumentException 。 


2. 查找 关键 码 对 应 的 值 


如 果 想 查找 一 个 关键 码 对 应 的 值 , 可 以 使 用 索引 来 表示 。 例 如, 下面 的 代码 在 
myHashtable 表 中 查找 一 个 关键 码 “hk” 对 应 的 值 。 


string myCountry = (string) myHashtable[ "hk"]; 
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查找 的 返回 值 是 一 个 对 象 ,在 存储 到 myCountry 变量 之 前 被 强制 转换 为 字符 
3. 获取 关键 码 和 值 


如 果 要 获取 哈 硕 表 中 的 关键 码 和 值 , 可 以 使 用 它 的 Keys 属性 和 Values 属性 。 
在 下 面 的 语句 中 ,利用 foreach 循环 分 别 读 取 myHashtable 的 Keys 属性 和 Values 属 
性 来 显示 哈 希 表 中 全 部 的 关键 码 和 值 。 


由 

















foreach (string mykey in myHashtable. Keys) { // 显示 全 部 的 关键 码 
Console. WriteLine("mykey = " + mykey); 

} 

foreach (string myValue in myHashtable. Values) { // 显示 全 部 的 值 
Console. WriteLine("myValue = " + myValue); 


哈 希 表 有 很 多 属性 和 方法 ,下 面 通 过 一 个 例子 来 了 解 它们 的 用 法 。 
例 4-18 ” 哈 硕 表 的 属性 和 方法 (04-18. cs) 。 


using Systenm; 

using System, Collections; 

class 04- 18 - Hashtable { 

pulic static void Main( ) 

{ 

Hashtable myHashtable = new Hashtable( ); // 创建 一 个 蛤 希 表 对 象 myHashtable 

myHashtable. Add("AL", "Alabama" ); // 添加 Key- Value 对 

myHashtable. Add( "CA", "California"); 

myHashtable. Add( "FL", "Florida" ); 

myHashtable. Add( "NY", "New York"); 

foreach (string myKey in myHashtable. Keys) { // 显示 哈 希 表 的 全 部 Keys 
Console. WriteLine("myKey = "+ myKey); 

} 

foreach( string myValue in myHashtable. Values) { // 显示 哈 希 表 的 全 部 Values 
console. WriteLine("myValue = "+myValue) 

} 

if (myHashtable. ContainsKey("FL")) { // 判断 哈 希 表 是 否 包含 特定 Key 
Console. WriteLine( "myHashtable contains the key FL"); 

} 

if (myHashtable. ContainsValue("Florida")) { // 判断 哈 希 表 是 否 包含 特定 Value 
Console. WriteLine( "myHashtable contains the value Florida") 

} 

Console. WriteLine( "Removing FL from myHashtable" ); 

myHashtable. Remove( "FL"): // 移 除 哈 希 表 中 的 某 个 Key- Value 对 

int count = myHashtable. Count; // 获取 哈 希 表 的 元 素 个 数 

Console. WriteLine("Copying keys to myKeys array"); 

string[ ] myKeys = new string[count]; 

myHashtable. Keys. CopyTo(myKeys, 0); // 将 哈 希 表 的 Keys 复制 到 数组 myKeys 中 

for (int counter = 0; counter <myKeys. Length; counter++ ) { // 显示 数组 myKeys 的 内 容 
Console. WriteLine("myKeys[" + counter + "] =" + myKeys[counter]); 

4 

} 
} 
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这 个 程序 的 输出 结果 如 下 : 


myKey = AD 

myKey = CA 

myKey = FL 

myValue = Alabama 

myValue = California 

myValue = Florida 

myHashtable contains the key FL 
myHashtable contains the value Florida 
Removing FL from myHashtable 
Copying keys to myKeys array 
myKeys[0] = AL 

myKeys[1] = CA 

myKeys[2] = NY 


4.5.3 队列 


队列 (Queues) 是 一 个 遵循 “先进 先 出 ”(First In First Out, FIFO) 原 则 的 集合 。 在 一 端 
输入 数据 ( 称 为 “加 队 ”,Enqueue) ,在 另 一 端 输出 数据 ( 称 为 “ 减 队 ”,Dequeue)。 可 见 , 队 列 
中 数据 的 插入 和 删除 都 必须 在 队列 的 头 尾 进行 ,而 不 能 直接 在 中 间 的 任意 位 置 插入 和 删除 

在 管理 有 限 的 资源 时 ,队列 是 一 个 非常 好 的 数据 结构 。 例 如 , 当 需 要 在 只 有 一 个 CPU 
的 计算 机 系统 中 运行 多 个 任务 时 ,由 于 计算 机 一 次 只 能 处 理 一 个 任务 ,其 他 的 任务 就 被 放 在 
一 个 专门 的 队列 中 排队 等 候 。 另 外 ,打印 机 缓冲 池 中 的 等 待 作业 也 是 使 用 队列 的 例子 。 

创建 一 个 Queue 对 象 可 以 使 用 以 下 方法 : 





Queue myQueue = new Queue(); 


使 用 Enqueue() 方 法 可 以 添加 元 素 到 队列 尾 , 例 如 : 


myQueue. Enqueue( "This"); 
myQueue. Enqueue( "is"); 
myQueue. Enqueue( "a" ); 
myQueue. Enqueue( "test" ); 





























这 些 元 素 在 队列 myQueue 中 的 顺序 为 This \is \a \test。 
使 用 Dequeue() 方 法 可 以 删除 队列 头 的 元 素 。 该 方法 返回 这 个 元 素 , 然 后 从 队列 中 删 
除 它 。 以 下 代码 将 显示 This, 它 也 将 从 myQueue 中 删除 。 例 如 : 





Console. WriteLine( myQueue. Dequeue( )); 











读 取 队列 中 最 前 面 的 元 素 可 以 使 用 Peek() 方 法 。 该 方法 也 返回 这 个 元 素 , 但 并 不 从 队 
列 中 删除 它 。 下 面 的 代码 将 会 显示 is ,该 元 素 在 队列 myQueue 的 最 前 面 。 
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Console. WriteLine( myQueue. Peek()); 


例 4-19 ”队列 操作 (04-19. cs)。 


using System; 
using System. Collections; 
class 04— 19— Queue { 
public static void Main() { 
Queue myQueue = new Queue(); // 创建 一 个 队列 对 象 myQueue 
myQueue. Enqueue( "Happy "); // 向 队列 中 添加 元 素 
myQueue. Enqueue( "New "); 
myQueue. Enqueue( "Year "); 
foreach (string myString in myQueue) { // 显示 队列 中 的 元 素 
Console. WriteLine("myString = " + myString); 
1 
int numElements = myQueue.Count; // 获取 队列 的 元 素 个 数 
for (int count = 0; count <numElements; count++); { 
// 使 用 Peek 方法 查找 队列 中 的 下 一 项 ,然后 使 用 Dequeue 方法 使 其 出 队 
Console. WriteLine( "myQueue.Peek() = " + myQueue.Peek() ); 
Console. WriteLine( "myQueue.Dequeue() = " + myQueue.Dequeue() ); 
由 
1 


这 个 程序 的 输出 结果 如 下 : 


myString = Happy 
myString = New 

myString = Year 

myQueue. Peek() = Happy 
myQueue. Dequeue() = Happy 
myQueue. Peek() = New 
myQueue. Dequeue() = New 
myQueue. Peek() = Year 
myQueue. Dequeue() = Year 


4.5.4 堆栈 

堆栈 (Stacks) 是 一 种 遵循 “后 进 先 出 ”Last In First Out,LIFO) 原 则 的 数据 集合 ,简称 
为 栈 。 栈 只 能 在 一 端 输入 /输出 , 它 有 一 个 固定 的 栈 底 和 一 个 浮动 的 栈 顶 。 所 有 对 堆栈 的 操 
作 都 是 针对 栈 顶 元 素 进 行 的 。 如 果 栈 顶 指 针 指向 了 栈 底 ,说 明 当 前 的 堆栈 是 空 的 。 

创建 一 个 堆栈 对 象 可 以 使 用 下 列 代码 : 


Stack myStack = new Stack(); 


对 堆栈 进行 操作 主要 有 以 下 方法 。 
(1) void Push(object item) : 在 堆栈 顶部 添加 一 个 元 素 , 也 叫 人 栈 。 
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(2) object Pop(): 删除 栈 顶 的 元 素 并 返回 该 元 素 , 也 叫 出 栈 。 
(3) object Peek() : 返回 栈 顶 元 素 ,但 不 删除 它 。 

下 面 的 例子 演示 了 这 个 堆栈 。 

例 4-20 堆栈 操作 (04-20. cs) 。 











using System; 
using System. Collections; 
class 04— 20— Stacks { 
public static void Main() { 
Stack myStack = new Stack( ); // 创建 一 个 堆栈 对 象 myStack 
myStack. Push ("Happy" ); // 向 堆栈 中 添加 元 素 
myStack. Push ("New"); 
myStack. Push ("Year"); 
foreach (string myString in myStack) { // 显示 堆栈 中 的 元 素 
Console. WriteLine("myString = " + myString ); 
lL. 
int numElements = myStack,Count; // 获取 堆栈 中 的 元 素 个 数 
for (int count = 0; count <numElements; count++); { 
// 使 用 Peek 方法 找到 堆栈 中 的 下 一 个 元 素 ,然后 使 用 Pop 方法 使 其 出 栈 
Console. WriteLine( "myStack.Peek() = " + myStack.Peek() ); 
Console. WriteLine( "myStack.Pop() = " + myStack. Pop() ); 
1 


这 个 程序 的 输出 结果 如 下 : 


myString = Year 
myString = New 
myString = Happy 
myStack. Peek() = Year 
myStack. Pop() = Year 
myStack. Peek() = New 
myStack. Pop() = New 
myStack. Peek() = Happy 
myStack. Pop() = Happy 


[4.6 习题 与 上 机 练习 
A 


(1) 在 C# 语 言 中 值 类 型 和 引用 类 型 有 何不 同 ? 
(2) 结构 和 类 的 区 别 是 什么 ? 
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2. 程序 题 
(1) 写 出 以 下 程序 的 运行 结果 。 





(2) 写 出 下 列 函数 的 功能 。 





3. 上 机 练习 


(1) 编写 一 个 学 生 类 用 于 处 理学 生 信 息 ( 学 号 、 姓 名 、 性 别 , 专 业 ) ,在 创建 学 生 类 的 实例 
时 ,把 学 生 信 息 作 为 构造 函数 的 参数 输入 ,然后 将 学 生 信 息 在 浏览 器 输出 。 
(2) 编写 一 个 类 输入 矩形 的 长 和 宽 , 计 算 矩 形 的 面积 。 
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Web Form 技 术 | 


为 了 提高 Web 开发 的 效率 ,ASP. NET 应 用 了 “基于 控件 的 可 视 化 界面 设计 ”和 “事件 
驱动 的 程序 运行 模式 ”。 通 过 使 用 ASP. NET 提供 的 服务 器 控件 将 这 些 控 件 拖 放 到 Web 窗 
体 中 ,轻松 地 进行 ASP. NET 页 面 设计 。 同 时 给 特定 的 事件 提供 事件 响应 代码 的 编写 模 
板 , 大 大 方便 了 Web 软件 开发 者 ,提高 了 开发 效率 。 

本 章 将 介绍 Web Form 技术 ,包括 Web 服务 器 控件 数据 验证 控件 .用户 控 件 的 使 用 ， 
以 及 如 何 创 建 模板 页 等 。 





5.1 ASP.NET 页 面 的 生命 周期 


ASP. NET 页 面 的 生命 周期 是 ASP. NET 中 非常 重要 的 概念 ,了 解 并 掌握 ASP. NET 
页 面 的 生命 周期 就 能 够 在 合适 的 生命 周期 内 编写 代码 ,执行 事务 ,并 开发 自 定义 控件 。 

ASP. NET 网 页 一 般 由 两 部 分 组 成 , 即 可 视界 面 和 处 理 逻 辑 。 

。 可 视界 面 : 由 HTML 标记 、ASP. NET 服务 器 控件 等 组 成 , 即 . aspx 文件 。 

。 处 理 迎 辑 : 包含 事件 处 理 程序 和 代码 ,如 C# 代 码 , 即 .cs 文件 。 

ASP. NET 页 面 运行 时 将 经 历 一 个 生命 周期 ,在 生命 周期 内 该 页 面 执行 一 系列 的 步 又 ， 
包括 控件 的 初始 化 ,控件 的 实例 化 .还 原状 态 和 维护 状态 等 ,以 及 通过 JIS 反馈 给 用 户 呈 现 
成 HTML。 

一 般 来 说 , Web 页 面 的 生命 周期 要 经 历 以 下 阶段 : 

页 面 请 求 一 开始 一 初始 化 一 页 面 加 载 控 件 一 验证 一 回 发 事件 处 理 呈 现 一 印 载 。 

(1) 页 面 请 求 (Page Request) : 页 面 请 求 发 生 在 Web 页 面 生命 周 期 开始 之 前 。 当 用 户 
请 求 一 个 Web 页 面 时 ,ASP.NET 将 确定 是 否 需要 分 析 或 者 编译 该 页 面 ,或 者 是 否 可 以 在 
不 运行 页 的 情况 下 直接 请 求 缓 存 响 应 客户 端 。 

(2) 开始 (Start) : 在 发 生 了 请 求 后 页 面 就 进入 开始 阶段 ,在 该 阶段 页 面 将 确定 请 求 是 
回 发 请 求 还 是 新 的 客户 端 请 求 ,并 设置 IsPostBack 属性 。 

(3) 初始 化 (Page Initialization) : 在 页 面 开 始 后 进入 了 初始 化 阶段 ,在 初始 化 期 间 页 面 
可 以 使 用 服务 器 控件 ,并 为 每 个 服务 器 控件 进行 初始 化 , 即 设置 每 一 个 控件 的 UniqueID 属性 。 

(4) 页 面 加 载 控件 (Load) : 如 果 当 前 请 求 是 回 发 请 求 , 则 页 面 中 各 个 控件 的 新 值 和 
ViewState 将 被 恢复 或 设置 。 

(5) 验证 (Validation) : 在 验证 期 间 页 面 中 的 验证 控件 调用 自己 的 Validate 方法 进行 验 
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证 以 便 设 置 自己 的 IsValid 属性 ,因为 验证 控件 是 在 客户 端 和 服务 器 端 都 要 进行 验证 的 。 
(6) 回 发 事件 处 理 (Postback event handling): 如 果 请 求 是 回 发 请 求 , 则 调用 所 有 事件 
的 处 理 程序 。 
(7) 呈现 (Rendering) : 在 呈现 之 前 会 保存 所 有 控件 的 ViewState 视图 状态 。 在 呈现 扫 
间 , 页 面 会 调用 每 个 控件 的 Render 方法 ,将 各 个 控件 的 HTML 文本 写 到 Response 的 
OutputStream 属性 中 。 
(8) 印 载 (Unload) : 完全 呈现 页 面 后 将 页 面 发 送 到 客户 端 ,在 准备 丢弃 该 页 时 ,将 调 
印 载 并 执行 清理 ,资源 被 释放 。 


66.2 ”Web 服务 器 控件 概述 
7 




























































































通常 情况 下 ,服务 器 控件 都 包含 在 ASP. NET 页 面 中 ,可 以 被 服务 器 端的 程序 代码 访 
问 和 操作 。 

服务 器 控件 都 是 ASP. NET 页 面 上 的 对 象 ,采用 事件 驱动 的 编程 模型 ,客户 端 触发 的 
事件 在 服务 器 端 处 理 。 所 有 的 服务 器 控件 事件 都 传递 两 个 参数 ,如 按钮 单 击 事件 (Button_ 
Click (object sender，EventArgs e))。 其 中 ,第 一 个 参数 sender 表示 引发 事件 的 对 象 以 及 
包含 任何 事件 特定 信息 的 事件 对 象 ; 第 二 个 参数 e 是 EventArgs 类 型 ,对 于 某 些 控件 来 说 
是 特定 于 该 控件 的 类 型 。 


5.2.1 服务 器 控件 的 不 同类 型 


ASP. NET 提供 不 同类 型 的 服务 器 控件 ( 见 图 5-1) ,以 此 来 满足 开发 人 员 的 需求 ,主要 
如 下 。 

(1) 标准 控件 (Standard Controls): Web 服 
务 器 控件 是 服务 器 可 理解 的 特殊 ASP. NET 标 
签 。 它 的 功能 更 强大 ,使 用 更 灵活 ,但 不 一 定 对 应 
到 某 个 HTML 元 素 。 

(2) 数据 控件 (Data Controls) : 帮助 输入 . 访 
问 和 显示 Web 页 面 上 的 数据 ,主要 包括 数据 源 控 
件 、 数 据 显示 控件 和 数据 表单 管理 控件 等 。 
(3) 验证 控件 (Validation Controls) : 用 于 验 
证 用 户 输 入 。 如 果 没 有 通过 验证 ,将 向 用 户 显示 图 5-1 服务 器 控件 的 分 类 
一 条 错误 消息 。 

(4) 导航 控件 (Navigation Controls) : 目的 是 让 用 户 能 方便 .直接 地 从 一 个 页 面 移 到 另 
一 个 页 面 。 它 有 3 个 不 同 的 服务 器 控件 , 即 TreeView、Menu 和 SiteMapPath ,这 些 控 件 提 
供 不 同 的 方式 来 管理 Web 应 用 程序 中 的 链接 和 导航 。 

(5) 登录 控件 (Login Controls) : 支持 用 户 的 注册 和 身份 验证 ,允许 根据 当前 用 户 是 否 
已 登录 显示 特殊 的 内 容 。 

(6) HTML 控件 (HTMIL Controls) : 这 是 对 HTML 标记 的 扩展 ,每 个 HTML 控件 都 
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和 原来 的 HTML 标记 一 一 对 应 。 通 常 ,ASP. NET 文件 中 的 HTML 元 素 默认 作为 文本 进 


行 处 


理 。 为 了 使 这 些 元 素 可 编程 化 ,需要 添加 runat= "server" 属 性 ,指示 HTML 元 素 应 作 


为 服务 器 控件 进行 处 理 。 


局 .可 访问 性 等 ,主要 包括 布局 属性 (如 Height、Width) .行为 属性 (如 Enabled、Visible 等 ) .可 


访问 


的 唯 


asp 


程序 


5.2.2 服务 器 控件 的 共有 属性 和 事件 
1. 共有 属性 
共有 属性 就 是 所 有 的 服务 器 控件 都 有 的 属性 ,这 些 属性 主要 用 来 设置 控件 的 外 观 、 布 








属性 (如 AccessKey、TabIndex)、 外 观 属性 (如 BackColor、ForeColor、BorderColor 等 ) 。 
每 个 服务 器 控件 都 有 一 个 id 属性 和 runat 二 "server" 属 性 。 其 中 id 属性 是 服务 器 控件 
一 标识 , 供 服 务 器 端 代码 进行 访问 。 

寻 此 定义 一 个 服务 器 控件 的 基本 语法 如 下 : 








< asp: 控 件 id= "控件 标识 ”runat = " server" 属性 1= 值 1,... ,属性 n= 值 n /> 





民 务 器 控件 的 属性 既 可 以 通过 属性 页 窗口 来 设置 ( 见 图 5-2), 也 可 以 通过 HTML 代码 
现 。 

例 5-1 一 个 包含 服务 器 控件 的 页 面 (05-01. aspx) 。 

一 个 页 面包 括 两 个 服务 器 控件 , 即 asp:Button 按钮 控件 和 asp:Label 标签 控件 。 其 中 ， 


:Button 控件 的 OnClick 属性 声明 了 单 击 事件 的 处 理 程序 名 。 


该 页 面 的 HTML 代码 如 下 : 


<form id = "forml" runat = "server"> 
<asp:Button id = "btnSubmit" Text = "OK" OnClick = "btnSubmit Click" runat = "server" /> 
<asp:Label id = "lblMessage" runat = "server"/> 

</form > 


该 页 面 对 应 的 C# 程序 代码 如 下 : 


protected void Page Load(Object sender, EventArgs e) { 
if (!IsPostBack) { // 判断 页 面 是 否 为 第 一 次 加 载 
lblMessage. Text = "页 面 第 一 次 访问 !"; 
} 
else { 
lblMessage. Text = "页 面 被 提交 了 !"; 
} 
// 按 下 OK 按钮 后 的 处 理 代 码 : 
public void btnSubmit Click (Object sender, EventArgs e) { 
btnSubmit. Text = "You click me!"; 
} 














上 面 的 代码 首先 定义 了 一 个 Page_Load 事件 ,其 次 定义 了 一 个 按钮 的 Click 事件 处 理 
btnSubmit_Click, 
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当 页 面 被 初次 加 载 时 会 执行 Page_Load 中 的 代码 , 它 通过 判断 Page 对 象 的 ISPostBack 
属性 来 确定 页 面 是 否 为 第 一 次 加 载 。 





2. 共有 事件 


Eat 
EE 
Height 
Width 
日 和 为 
CausesValidation True 
ClientiDMode Inherit 
CommandArgum 
CommandName 
Enabled True 
EnableTheming True 
EnableViewState True 
OnClientClick 
PostBackUr| 
SkinID 
ToolTip 
UseSubmitBehavi, True 
ValidateRequesth Inherit 
ValidationGroup 
ViewStateMode Inherit 
Visible True 
日 可 访问 性 
AccessKey 
Tablndex 0 
日 数据 
(Expressions) 
日 外 观 
BackColor 
BorderColor 
Bordersyle NotSet 
BorderWidth 
CssClass 
田 Font 
ForeColor 


ee 


图 5-2 服务 器 控件 的 属性 页 


-ox 
Button1 System.Web.ULWebControls.Button ~ 














服务 器 控件 的 事件 当 服 务 器 进行 到 某 个 时 刻 时 引发 从 而 完成 某 些 任 务 。 事 件 的 回 发 会 
导致 页 面 的 Init 事件 和 Load 事件 等 ,有 时 还 需要 根据 情况 判断 是 否 需 要 检测 回 发 事件 , 常 


























用 的 检测 方法 就 是 判读 Page. isPostBack、Page. IsCallback、Page. IsCrossPagePostBack 等 
属性 来 确定 页 面 事件 的 状态 。 服 务 器 控件 共有 的 事件 如 表 5-1 所 示 。 
表 5-1 服务 器 控件 共有 的 事件 




















事件 说 明 

DataBind 当 控件 上 的 DataBind 方法 被 调用 并 且 该 控件 被 绑 定 到 一 个 数据 源 时 触发 
Disposed 从 内 存 中 释放 一 个 控件 时 触发 

Init 控件 被 初始 化 时 触发 

Load 把 控件 装 人 页 面 时 触发 ,该 事件 在 Init 后 发 生 

PreRender 在 控件 准备 生成 它 的 内 容 时 触发 

Unload 从 内 存 中 印 载 控件 时 触发 
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63 标准 的 Web 服务 器 控件 


Web 服务 器 控件 位 于 System. Web. UI. WebControls 命名 空间 中 ,是 从 WebControl 
基 类 直接 或 间接 派生 出 来 的 。Web 服务 器 控件 的 标准 控件 如 图 5-3 所 示 。 它 通常 分 为 4 类 
控件 , 即 文本 输入 与 显示 控件 ,控制 权 转 移 控件 .选择 控件 、 容 器 控件 。 下 面 分 别 对 这 4 类 控 
件 进 行 介绍 。 


1 


怠 国 田园 准 晶 日 轩 盈 和 居 园 目 关 国 加 加 六 国 上 团 帝 固 国 四 全 育 ”六 


wu 


Ee 


加 
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5.3.1 文本 输入 与 显示 控件 


文本 输入 控件 即 文本 控件 (TextBox)。 显 示 控 件 包 括 两 种 , 即 显示 文本 的 标签 控件 
(Label)、 显 示 图 片 的 图 像 控 件 (Image) 。 下 面 分 别 对 它们 加 以 介绍 。 
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TextBox 控件 用 于 提供 文本 编辑 能 力 。TextBox 控件 支持 多 种 模式 ,可 以 用 来 实现 单 
行 输入 、 多 行 输入 和 密码 输入 。 表 5-2 为 文本 控件 的 常用 属性 。 
表 5-2 TextBox 控件 的 常用 属性 


1. 文本 控件 (TextBox) 



















































































属 性 说 明 

Ra ea 在 文本 修改 以 后 是 否 自动 重 传 ,默认 为 false, 当 设 置 为 rue 时 ,用 户 更 改 内 容 后 触 

发 TextChanged 事件 

Columns 文本 框 的 宽度 

EnableViewState “| 控件 是 否 自动 保存 其 状态 以 用 于 往返 过 程 

MaxLength 用 户 输入 的 最 大 字符 数 

ReadOnly 是 否 为 只 读 

Rows 作为 多 行文 本 框 时 所 显示 的 行 数 

Text 获取 或 设置 TextBox 控件 中 的 数据 

TextMode 显示 模式 , 取 值 为 SingleLine、.MultiLine 或 Password 
例如 : 


private void txtUserName TextChanged(object sender, System. EventArgs e) { 
Labell. Text = txtUserName. Text; 
} 


2. 标签 控件 (Label) 


Label 控件 用 于 在 页 面 中 显示 只 读 的 静态 文本 或 数据 绑 定 的 文本 。 当 触发 事件 时 某 一 
段 文本 能 够 在 运行 时 更 改 。 示 例 代 码 如 下 : 


<asp:Label ID = "Label1”runat = " server”Text = " Hello"></asp:Label> 
上 述 代 码 声明 了 一 个 标签 控件 ,并 将 该 控件 的 ID 属性 设置 为 默认 值 Labell。 由 于 该 
控件 是 服务 器 端 控件 , 故 包 含 runat 二 "server" 属 性 。 表 5-3 为 Label 控件 的 属性 和 事件 。 
表 5-3 Label 控件 的 属性 和 事件 











属性 /事件 说 明 
Text 属性 获取 或 设置 Label 控件 中 的 数据 
TextChanged 事件 用 户 输入 信息 后 离开 TextBox 控件 时 引发 的 事件 





3. 图 像 控 件 (Image) 














图 像 控件 用 来 在 Web 窗 体 中 显示 图 片 或 图 像 ,图 像 控 件 的 常用 属性 如 表 5-4 所 示 。 
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表 5-4 Image 控件 的 常用 属性 


























属 性 说 明 

AlternateText 在 图 像 无 法 显示 时 显示 的 替换 文字 
DescriptionUrl 包含 更 详细 的 图 像 说 明 的 URL 
GenerateEmptyAlternateText 当 未 指定 替换 文字 时 是 否 生 成 空 的 替换 文字 属性 ,默认 为 false 
ImageAlign 图 像 的 对 齐 方式 
ImageUrl 要 显示 图 像 的 URL 
ToolTip 把 鼠标 指针 放 在 控件 上 时 显示 的 工具 提示 

当 图 片 无 法 显示 的 时 候 图 片 将 被 替换 成 AlternateText 属性 中 的 文字 ,ImageAlign 属 


性 控制 图 片 的 对 齐 方式 ,而 ImageUrl 属性 用 来 设置 图 像 的 链接 地 址 。 图 像 控 件 具 有 可 控 
性 的 优点 ,可 以 通过 编写 HTML 来 控制 图 像 控 件 。 例 如 图 像 控 件 的 声明 代码 如 下 : 


<asp:Image ID = "Imagel"” runat = "server”AlternateText = "图 片 连接 失效 " 
ImageUr] = "http://www. shangducms. com/ images/cms. jpg" /> 


上 述 代 码 设 置 了 一 个 图 片 , 当 图 片 失效 的 时 候 提示 图 片 连接 失效 。 
注意 : 当 双 击 图 像 控 件 时 ,系统 并 没有 生成 事件 所 需要 的 代码 段 ,这 说 明 Image 控件 不 
支持 任何 事件 。 


5.3.2 控制 权 转 移 控件 


控制 权 转 移 控件 包括 以 下 4 种 类 型 。 

。 Button 控件 : 显示 标准 HTML 窗 体 按 钮 。 

。 LinkButton 控件 : 在 按钮 上 显示 文本 超 链接 。 

。 ImageButton 控件 : 显示 图 像 按 钮 。 

。 HyperLink 控件 : 在 某 些 文本 上 显示 文本 超 链接 。 


1. 按钮 控件 (Button .LinkButton .ImageButton) 


Button .LinkButton 和 ImageButton 为 按钮 控件 ,能 够 触发 事件 或 将 网 页 中 的 信息 回 
传 给 服务 器 。 它 们 的 作用 基本 相同 ,但 表现 形式 不 同 , 如 图 5-4 所 示 。 其 声明 代码 如 下 : 
<asp:Button ID = "Button1"” runat = "server" Text = "click me" /> <br /> 


<asp:LinkButton ID = "LinkButton1" runat = "server"> click me</asp:LinkButton > <br /> 
<asp:ImageButton ID = "ImageButton1" runat = "server" ImageURL = "a.bmp" /> 

















图 5-4 3 种 按钮 类 型 (Button、LinkButton ImageButton) 








按钮 控件 用 于 事件 的 提交 ， 
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有 件 。 表 5-5 和 表 5-6 分 


它们 通常 包含 一 些 公共 的 属性 和 





别 显示 了 按钮 控件 的 公共 属性 和 特殊 属性 , 表 5-7 显示 了 它们 的 公共 事件 。 














表 5-5 按钮 控件 (Button、LinkButton、ImageButton) 的 公共 属性 
属 性 说 明 
CausesValidation 按钮 是 否 导致 触发 验证 ,默认 为 true 
CommandArgument 与 此 按钮 关联 的 命令 参数 
CommandName 与 此 按钮 关联 的 命令 





Enabled 


控件 的 已 启用 状态 ,默认 为 true 





OnClientClick 


在 客户 端 OnClick 上 执行 的 客户 端 脚本 





ValidationGroup 





当 控件 导致 回 发 时 应 验证 的 组 
























































表 5-6 按钮 控件 (Button .ImageButton .LinkButton) 的 特殊 属性 
控件 名 称 属 性 说 明 
BR UseSubmitBehavior 指示 按钮 是 否 呈 现 为 提交 按钮 
Text 在 按钮 上 显示 的 文本 
ImageAlign 图 像 的 对 齐 方式 
ton PostBackURL 单 击 按钮 时 所 发 送 到 的 URL 
AlternateText 在 图 像 无 法 显示 时 显示 的 替换 文字 
ImageURL 要 显示 的 图 像 的 URL 
Di Text 要 为 该 链接 显示 的 文本 
PostBack URL 单 击 按钮 时 所 发 送 到 的 URL 
表 5-7 按钮 控件 (Button、LinkButton、ImageButton) 的 公共 事件 
事 件 说 明 
Click 单 击 按钮 时 会 引发 该 事件 
Command 在 单 击 按钮 并 定义 关联 的 命令 时 触发 
DataBinding 在 要 计算 控件 的 数据 绑 定 表达 式 时 触发 
Disposed 在 控件 已 被 释放 后 触发 
Init 在 初始 化 页 后 触发 
Load 在 加 载 页 后 触发 
PreRender 在 呈现 该 页 前 触发 
Unload 在 印 载 该 页 时 触发 





值得 一 提 的 是 ,最 常用 的 按钮 事件 是 Click( 单 击 ) 和 Command( 命 令 ) 事 件 。Click 事件 


不 能 传递 参数 ,处 理 的 事件 相对 








简单 。 而 Command 事件 可 以 传递 参数 ,负责 传递 参数 


CommandArgument 属性 和 CommandName 属性 。 

当 按 钮 同时 包含 Click 事件 和 Command 事件 时 通常 会 执行 Command 事件 。 通 过 判 
断 按 钮 的 CommandArgument 属性 和 CommandName 属性 值 可 以 执行 不 同 的 方法 ,这 样 就 
实现 了 同一 个 按钮 根据 不 同 的 值 进行 不 同 的 处 理 和 响应 ,或 者 多 个 按钮 与 一 个 处 理 代码 相 











关联 。 相 比 Click( 单 击 ) 事 件 而 
2. 超 链接 控件 (HyperLink) 








言 ,'Command( 命 令 ) 事 件 具 有 更 高 的 可 控 性 。 





的 是 


超 链接 控件 相当 于 实现 了 HTML 代码 中 的 "<a href 二 URL 地 址 > </a >" 效 果 。 当 拖 
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一 个 超 链接 控件 到 页 面 时 ,系统 会 自动 生成 控件 声明 代码 ,示例 代码 如 下 : 
<asp:HyperLink ID = "HyperLinkl1l" runat = " server"> HyperLink </asp:HyperLink> 


表 5-8 是 HyperLink 控件 的 属性 。 
表 5-8 HyperLink 控件 的 属性 

















属 性 说 明 
Text 要 为 该 链接 显示 的 文本 
ImageURL 要 显示 的 图 像 的 URL 
NavigateURL 定位 到 的 URL 
Target NavigateUrl 的 目标 框架 
5.3.3 选择 控件 
顾名思义 ,选择 控件 就 是 在 一 组 选项 中 选 出 一 项 或 多 项 ， ee 4 个 类 型 。 
。 单 选 控件 (RadioButton) : 用 于 在 一 个 选项 列表 中 选择 一 个 选项 ,使 用 时 通常 会 与 其 


他 RadioButton 控件 组 成 一 组 ,以 提供 一 组 互 斥 o 
。 复 选 框 控件 (CheckBox); 用 于 在 选中 和 清除 这 两 种 状态 间 切 换 。 
。 下拉 列表 控件 (DropDownList) : 允许 用 户 从 预定 义 的 列表 中 选择 一 项 。 
。 列表 控件 (ListBox): 允许 用 户 从 预定 义 的 列表 中 选择 一 项 或 多 项 。 
下 面 分 别 对 这 儿 种 控件 加 以 介绍 。 


1. 单 选 控 件 和 单 选 组 控件 (RadioButton 和 RadioButtonList) 





1) 单 选 先 控 件 (RadioButton) 




















单 选 控件 可 以 为 用 户 选择 某 选项 , 单 选 控件 的 常用 属性 和 事件 如 表 5-9 所 示 。 
表 5-9 RadioButton 控件 的 属性 和 事件 
属性 /事件 说 明 
AutoPostBack 属性 当 单 击 控件 时 自动 回 发 到 服务 器 ,默认 为 false 
Checked 属性 控件 的 已 选中 状态 ,默认 为 false 
GroupName 属性 此 单 选 控 件 所 属 的 组 名 
Text 属性 显示 的 文本 标签 
TextAlign 属性 文本 标签 相对 于 控件 的 对 齐 方式 ,默认 为 right 
CheckedChanged 事件 在 更 改 控件 的 选中 状态 时 触发 








单 选 控件 通常 需要 Checked 属性 来 判断 某 个 选项 是 否 被 选中 ,多 个 单 选 控件 之 间 可 能 
存在 着 某 些 联系 ,这 些 联系 通过 GroupName 进行 约束 和 联系 。 

例 5-2 一 个 含 单 选 控件 的 页 面 (05-02. aspx) 。 

该 页 面 的 HTML 代码 如 下 : 


<form id = "forml" runat = " server"> 
<div> 
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<asp:RadioButton ID = "RadioButtonl" runat = "server" GroupName = "chos" Text = "choose first" 
AutoPostBack = "true" OnCheckedChanged = "RadioButtonl CheckedChanged"/> 
</div> 
<div> 
<asp:RadioButton ID = "RadioButton2" runat = "server" GroupName = "chos" 
Text = "choose second" AutoPostBack = "true" 
OnCheckedChanged = "RadioButton2 CheckedChanged"/></div> 
<div> 
<asp:RadioButton ID = "RadioButton3" runat = "server" GroupName = "chos" 
Text = "choose third" AutoPostBack = "true" 
OnCheckedChanged = "RadioButton3_CheckedChanged"/> 
</div> 
<div> 
<asp:Label ID = "Labell" runat = "server" Text = "Label" ></asp:Label ></div> 
</form> 


上 述 代码 声明 了 3 个 单 选 控件 ,并 将 GroupName 属性 都 设置 为 chos。 单 选 控件 中 最 
常用 的 事件 是 CheckedChanged, 当 控件 的 选中 状态 改变 时 将 触发 该 事件 。 该 页 面 对 应 的 程 
序 代码 如 下 : 


using System; 

using System. Collections. Generic; 
using System. Ling; 

using Systenm. Web; 

using System. Web. UI; 

using System. Web. UI. WebControls; 


public partial class 05 02 : System.Web.UI. Page 
{ 
protected void Page Load(object sender, EventArgs e) { 


protected void RadioButtonl CheckedChanged(object sender, EventArgs e) { 
Labell. Text = "第 一 项 被 选中 "; 


protected void RadioButton2 CheckedChanged(object sender, EventArgs e) { 
Labell. Text = "第 二 项 被 选中 "; 


protected void RadioButton3_ CheckedChanged(object sender, EventArgs e) { 
Labell. Text = "第 三 项 被 选中 "; 





当选 中 状态 改变 时 触发 相应 的 事件 ,显示 第 几 项 被 选中 ,如 图 5-5 所 示 。 
和 TextBox 控件 相同 的 是 , 单 选 控件 不 会 自动 进行 页 面 回 传 ,必须 将 AutoPostBack 属 
性 设置 为 true 才能 在 焦点 丢失 时 和 触发 相应 的 CheckedChanged 事件 。 








S| 
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图 5-5 单 选 控件 的 使 用 


2) 单 选 组 控件 (RadioButtonList) 

单 选 组 控件 也 是 只 能 选择 一 个 项 目的 控件 ,和 单 选 控件 不 同 的 是 , 单 选 组 控件 没有 
GroupName 属性 ,但 是 却 能 够 列 出 多 个 单 选 项 目 。 另 外 , 单 选 组 控件 所 生成 的 代码 也 比 单 
选 控 件 实现 的 相对 少 。 单 选 组 控件 添加 项 如 图 5-6 所 示 。 
































图 5-6 单 选 组 控件 添加 项 


添加 项 目 成 员 后 系统 自动 在 .aspx 页 面 声明 服务 器 控件 代码 ,代码 如 下 : 


<asp:RadioButtonList ID = "RadioButtonList1" runat = "server" 
SelectedIndexChanged = "RadioButtonList1 SelectedIndexChanged"> 
<asp:ListItem> Choosel </asp:ListItem> 
<asp:ListItem> Choose2 </asp:ListItem> 
<asp:ListItem> Choose3 </asp:ListItem> 

</asp:RadioButtonList > 


上 面 的 代码 使 用 了 单 选 组 控件 实现 单 选 功能 。 单 选 组 控件 的 属性 和 事件 如 表 5-10 
所 示 。 
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表 5-10 ”RadioButtonList 控件 的 属性 和 事件 



































属性 /事件 说 明 
AutoPostBack 属性 当选 定 内 容 更 改 后 自动 回 发 到 服务 器 ,默认 为 false 
DataSourceID 属性 将 被 用 作 数 据 源 的 DataSource 的 控件 ID 
DataTextFiled 属性 数据 源 中 提供 项 文本 的 字段 
DataTextFormatString 属性 应 用 于 文本 字段 的 格式 ,例如 "{0:d)" 
DataValueField 属性 数据 源 中 提供 项 值 的 字段 
Items 属性 列表 中 项 的 集合 
RepeatColumns 属性 用 于 布局 项 的 列 数 , 初 值 为 0 
RepeatDirection 属性 项 的 布局 方向 ,默认 为 vertical 
SelectedIndexChanged 事件 在 更 改选 定 索引 后 触发 
TextChanged 事件 在 更 改 文本 属性 后 触发 





和 单 选 控件 一 样 ,双击 单 选 组 控件 时 ,系统 会 自动 生成 SelectedIndexChanged 事件 的 声 
明 , 可 以 在 该 事件 中 编写 代码 。 当 选 定 一 项 内 容 时 示例 代码 如 下 : 


protected void RadioButtonList1 SelectedIndexChanged(object sender, EventArgs e) { 
Labell, Text = RadioButtonList1,Text; // 文本 标签 的 值 等 于 所 选 控件 的 值 


2. 复 选 框 控件 和 复 选 组 控件 (CheckBox 和 CheckBoxList) 





) 复 选 框 控件 (CheckBox) 
和 单 选 框 控件 一 样 , 复 选 框 也 是 通过 Check 届 性 判断 是 否 被 选择 ,不 同 的 是 复 选 框 控 
件 没有 GroupName 属性 。 以 下 代码 声明 了 两 个 复 选 框 控 件 : 


<form id = "form2" runat = " server"> 

<asp:CheckBox ID = "CheckBox1" runat = "server" Text = "Check1" AutoPostBack= "true" /> 
<asp:CheckBox ID = "CheckBox2" runat = "server" Text = "Check2" RutoPostBack = "true" /> 
</form > 


当 双 击 复 选 框 控件 时 ,系统 会 自动 生成 CheckedChanged 事件 的 声明 。 当 复 选 框 控件 
的 选中 状态 被 改变 后 会 触发 该 事件 。 示 例 代码 如 下 : 


protected void CheckBox1 CheckedChanged(object sender, EventArgs e) { 
Labell. Text =" 选 框 1 被 选中 "; // 当选 框 1 被 选中 时 

protected void CheckBox2_CheckedChanged( object sender, EventArgs e) { 
Labell. Text =" 选 框 2 被 选中 "; // 当选 框 2 被 选中 时 
Labell. Font. Size = FontUnit. XXLarge; 


上 述 代 码 分 别 为 两 个 选 框 设置 了 事件 ,设置 了 当选 择 选 框 1 时 ,文本 标签 输出 “ 选 框 1 
被 选中 ”, 当 选择 选 框 2 时 ,输出 “ 选 框 2 被 选中 ”。 
对 于 复 选 框 而 言 , 用 户 可 以 在 复 选 框 控 件 中 选择 多 个 选项 ,所 以 就 没有 必要 为 复 选 框 控 
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件 进 行 分 组 ,也 就 是 说 复 选 框 控件 没有 GroupName 属性 。 

2) 复 选 组 控件 (CheckBoxList) 

和 单 选 组 控件 相同 ,服务 器 控件 同样 包括 了 复 选 组 控件 (CheckBoxList) , 拖 动 一 个 复 选 
控件 到 页 面 可 以 添加 复 选 组 列表 ,将 其 添加 在 页 面 后 系统 生成 的 代码 如 下 : 














AS 











<asp:CheckBoxList ID = "CheckBoxList1" runat = "server" RutoPostBack = "true" 
SelectedIndexChanged = "CheckBoxList1 SelectedIndexChanged"> 
<asp:ListItem Value = "Choosel"> Choosel </asp:ListItem> 
<asp:ListItem Value = "Choose2"> Choose2 </asp:ListItem> 
<asp:ListItem Value = "Choose3"> Choose3 </asp:ListItem> 
</asp:CheckBoxList> 


复 选 组 控件 最 常用 的 是 SelectedIndexChanged 事件 , 当 控 件 中 某 项 的 选中 状态 被 改变 
时 将 会 触发 该 事件 ,示例 代码 如 下 : 


protected void CheckBoxListl1 SelectedIndexChanged( object sender, EventArgs e) { 
if (CheckBoxList1. Items[0]. Selected) { // 判断 某 项 是 否 被 选中 
Labell. Font. Size = FontUnit. XXLarge; // 更 改 字体 大 小 
} 
if (CheckBoxList1. Items[1]. Selected) { // 判断 是 否 被 选中 
Labell, Font., Size = FontUnit. XLarge;  // 更 改 字体 大 小 
} 
if (CheckBoxList1. Items[2]. Selected) { 
Labell. Font. Size = FontUnit. XSmall; 
} 
} 


在 上 述 代 码 中 Item 数组 是 复 选 组 控件 中 项 目的 集合 ,其 中 Items[0] 是 复 选 组 中 的 第 一 
个 项 目 。CheckBoxListl. Items[0]. Selected 用 来 判断 是 否 被 选中 。 上 述 代码 用 来 修改 
Label 标签 的 字体 大 小 。 

注意 : 复 选 组 控件 和 单 选 组 控件 不 同 的 是 不 能 够 直接 获取 复 选 组 控件 的 某 个 选中 项 目 
的 值 , 因 为 复 选 组 控件 返回 的 是 第 一 个 选择 项 的 返回 值 ,只 能 够 通过 Item 集合 获取 某 个 或 
多 个 选中 的 项 目 值 。 


3. 下 拉 列 表 控 件 (DropDownList) 


列表 控件 能 够 在 一 个 控件 中 为 用 户 提供 多 个 选项 , 既 简 化 了 用 户 的 输入 ,同时 又 防止 用 
户 输入 错误 的 选项 。 列 表 控 件 主 要 包括 两 种 , 即 下 拉 列 表 DropDownList 和 多 项 选择 列表 
ListBox。 

使 用 DropDownList 控件 可 以 有 效 地 避免 用 户 输入 无 效 或 错误 的 信息 。 例 如 , 当 输入 
性 别 时 除了 男 就 是 女 ,输入 其 他 的 信息 就 是 错误 的 。 下 列 语句 声明 了 一 个 DropDownList 
控件 。 























<asp:DropDownList ID = "DropDownList1" runat = "server" AutoPostBack = "true" 
SelectedIndexChanged = "List Changed" > 
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<asp:ListItem > 1 </asp:ListItem> 

<asp:ListItem > 2 </asp:ListItem> 

<asp:ListItem > 3 </asp:ListItem> 

<asp:ListItem > 4</asp:ListItem> 
</asp:DropDownList> 





DropDownList 控件 也 可 以 绑 定数 据 源 控件 。 它 最 常用 的 事件 是 SelectedIndexChanged, 当 
户 选择 相应 的 项 目 使 得 DropDownList 控件 的 选择 项 发 生变 化 时 将 会 触发 该 事件 ,示例 
代码 如 下 : 























protected void DropDownList1_SelectedIndexChanged1l(object sender, EventArgs e) 


{ 
Labell. Text = "你 选择 了 第 ”+ DropDownList1l1. Text + "项 "; 





























下 拉 列 表 控 件 的 属性 和 事件 如 表 5-11 所 示 。 

表 5-11 DropDownList 控件 的 属性 和 事件 

属性 /事件 说 明 

AutoPostBack 属性 当选 定 内 容 更 改 后 自动 回 发 到 服务 器 ,默认 为 false 
DataSourceID 属性 将 被 用 作 数 据 源 的 DataSource 的 控件 ID 
DataTextFiled 属性 数据 源 中 提供 项 文本 的 字段 
DataTextFormatString 属性 应 用 于 文本 字段 的 格式 ,例如 “{0:d)}” 
DataValueField 属性 数据 源 中 提供 项 值 的 字段 
Items 属性 列表 中 项 的 集合 
SelectedIndexChanged 事件 在 更 改选 定 索引 后 触发 
TextChanged 事件 在 更 改 文本 属性 后 触发 


4. ListBox 控件 


相对 于 DropDownList 控件 而 言 ,ListBox 控件 可 以 通过 SelectionMode 属性 指定 是 否 
允许 用 户 选择 多 项 。 在 创建 一 个 ListBox 控件 后 示例 代码 如 下 : 


<asp:ListBox ID = "ListBoxl" runat = "server" AutoPostBack = "true" 
onselectedindexchanged = "ListBoxl SelectedIndexChanged"> 
<asp:ListItem> 第 1 项 </asp:ListItem> 
<asp:ListItem> 第 2 项 </asp:ListItem> 
<asp:ListItem> 第 3 项 </asp:ListItem> 
<asp:ListItem> 第 4 项 </asp:ListItem> 
</asp:ListBox > 
<asp:Label ID = "Label1"” runat = "server"” Text = " 你 所 选 的 项 目 为 : "></asp:Label > 





ListBox 控件 的 属性 和 DropDownList 控件 基本 相同 ,只 增加 了 两 个 属性 ,如 表 5-12 
所 示 。 
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表 5-12 ListBox 控件 比 DropDownList 控件 增加 的 属性 








属 性 说 明 
Rows 要 显示 的 可 见 行 的 数目 
SelectionMode 列表 的 选择 模式 ,默认 为 single 


当 设置 SelectionMode 属性 为 Single 时 ,表明 只 允许 用 户 从 列表 框 中 选择 一 个 项 目 ; 如 
果 设 置 SelectionMode 属性 为 Multiple, 用 户 可 以 按 住 Ctrl 键 或 者 使 用 Shift 组 合 键 从 列表 
中 选择 多 个 数据 项 。 
同样 ,SelectedIndexChanged 也 是 ListBox 控件 中 最 常用 的 事件 ,可 对 事件 编码 如 下 














protected void ListBox1l_SelectedIndexChanged(object sender, EventArgs e) { 
Labell.Text = "你 选择 了 ”+ ListBoxl.Text ; 
} 


上 面 的 程序 实现 了 与 DropDownList 同样 的 效果 。 
但 是 , 当 用 户 需 要 选择 ListBox 列表 中 的 多 项 时 ( 即 SelectionMode 属性 为 Multiple)， 
开发 人 员 编 写 的 事件 代码 如 下 : 





protected void ListBoxl SelectedIndexChanged1 (object sender, EventArgs e) { 
Labell.Text += "<br> 你 选择 了 "+ ListBox1l. Text ; 
} 


上 述 代码 使 用 了 “十 二 ”运算 符 , 当 用 户 每 多 选 一 项 的 时 候 都 会 触发 SelectedIndexChanged 
事件 ,如 图 5-7 所 示 。 


1 项 上 
第 2 项 





4 项 “| 你 所 选 的 项 目 为 : 
你 选择 了 第 1 项 
你 选择 了 第 2 顺 
你 选 掺 了 第 3 项 





图 5-7 ListBox 控件 的 多 选 效 果 


5.3.4 容器 控件 


容器 控件 有 两 种 类 型 。 
。 面板 控件 (Panel): 可 用 作 静 态 文本 和 其 他 控件 的 父 级 控件 。 
。 占 位 控件 (PlaceHolder): 存储 动态 添加 到 网 页 上 的 服务 器 控件 的 容器 。 
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1. 面板 控件 (Panel) 


面板 控件 可 以 作为 一 组 控件 的 容器 ,通过 设置 面板 控件 内 的 所 有 控件 是 显示 还 是 隐藏 
来 达到 设计 者 的 特殊 目的 。 当 创建 一 个 面板 控件 时 ,系统 生成 的 HTML 代码 如 下 : 





<asp:Panel ID = "Panell" runat = "server"> 
</asp:Panel> 


面板 控件 的 常用 功能 就 是 显示 或 隐藏 一 组 控件 ,其 Visible 属性 的 默认 值 为 true。 设 置 
Panel 控件 的 HTML 代码 如 下 : 


<form id = "forml" runat = " Server"> 
<asp:Button ID = "Button1" runat = "server" Text = "Show Panel" /> 
<asp:Panel ID = "Panell" runat = "server" Visible= "false"> 
<br /> The controls in a Panel are in follows. 
<br /> 
<asp:Label ID = "Labell" runat = "server" Text = "Hello"></asp:Label> 
<asp:TextBox ID = "TextBoxl"”runat = "server"></asp:TextBox> 
</asp:Panel> 
</form > 


上 述 代码 创建 了 一 个 Panel 控件 ,初始 状态 为 不 可 见 。 在 Panel 控件 外 有 一 个 Button 
控件 , 当 用 户 单 击 Button 控件 时 将 显示 Panel 控件 。 代 码 如 下 : 
protected void Button1_Click(object sender, EventArgs e) { 


Panell. Visible = true; // Panel 控件 显示 可 见 
} 


当 页 面 被 初次 载 入 时 ,Panel 控件 以 及 Panel 控件 内 的 所 有 控件 都 为 隐藏 ,如 图 5-8 所 
示 。 当 用 户 单 击 Button 时 ,Panel 控件 及 其 内 部 的 控件 都 为 可 见 ,如 图 5-9 所 示 。Panel 控 
件 还 包含 一 个 GroupText 属性 , 当 Panel 控件 的 GroupText 属性 被 设置 时 ,Panel 将 会 被 创 
建 一 个 带 标题 的 分 组 框 ,效果 如 图 5-10 所 示 。 
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图 5-8 Panel 控件 被 隐藏 
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a xx" 
Oars -elon | 


The controls in a Panel are in follows. 


Hello 





图 5-9 Panel 控件 被 显示 


[3 nx) 
Oe pol | 
This is a panel 


The controls in a Panel are in follows. 
Hilo |] 





图 5-10 ”Panel 控件 的 GroupText 属性 


2. 占 位 控件 (PlaceHolder) 


和 Panel 控件 相同 的 是 ,PlaceHolder 控件 也 是 控件 的 容器 ,但 是 在 HTML 页 面 旦 现 中 
本 身 并 不 产生 HTML。 创建 一 个 PlaceHolder 控件 的 代码 如 下 : 


<asp:PlaceHolder ID = "PlaceHolderl" runat = "server"> 
</asp:PlaceHolder > 


在 CS 页面 中 允许 用 户 动态 地 在 PlaceHolder 上 创建 控件 ,CS 页 面 代 码 如 下 : 


protected void Page Load(object sender, EventArgs e) { 

TextBox text = new TextBox(); // 创建 一 个 TextBox 对 象 

text. Text = "happy"; 

this. PlaceHolder1. Controls. Add(text); // 为 占 位 控件 动态 地 增加 一 个 控件 
} 


上 述 代 码 动态 地 创建 了 一 个 TextBox 控件 并 显示 在 占 位 控件 中 ,运行 效果 如 图 5-11 
所 示 。 
开发 人 员 不 仅 能 够 通过 编程 在 PlaceHolder 控件 中 添加 控件 ,还 可 以 在 PlaceHolder 控 
件 中 拖 动 相应 的 服务 器 控件 进行 控件 的 呈现 和 分 组 。 
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图 5-11 PlaceHolder 控件 的 使 用 


6.4 数据 的 有 效 性 检测 


Visual Studio 2015 提供 了 强大 的 数据 验证 控件 ,可 以 验 ，、 国 5 于 是 昨 时 
证 用 户 的 输入 ,并 在 验证 失败 的 情况 下 显示 错误 消息 。 在 


lidator 
Visual Studio 的 工具 箱 中 可 以 看 到 的 验证 控件 如 图 5-12 A 


CustomValidator 
RangeValidator 
RegularExpressionV... 
RequiredFieldValidat... 
ValidationSummary 
工具 箱 中 的 验证 控件 






主意 ,验证 控件 本 身 并 不 接受 用 户 的 输入 ,它们 需要 与 其 
他 控件 (如 TextBox) 相 配合 完成 验证 数据 的 工作 ,可 以 使 用 
验证 控件 的 ControlToValidate 属性 将 验证 控件 和 被 验证 控 
件 关联 起 来 。 每 个 验证 控件 的 基本 说 明 见 表 5-13。 Es 
表 5-13 ”验证 控件 的 使 用 说 明 

验证 控件 功能 说 明 

RequiredFieldValidator 确保 用 户 不 跳 过 输入 
使 用 比较 运算 符 ( 大 于 小 于 等于) 将 输入 控件 与 一 个 固定 值 或 另 一 个 输 
入 控件 进行 比较 
与 CompareValidator 非常 相似 ,只 是 它 用 来 检查 输入 是 否 在 两 个 值 或 其 
他 输入 控件 的 值 之 间 
检查 用 户 的 输入 是 否 与 正则 表达 式 定义 的 模式 相 匹 配 ,允许 检查 可 预知 
的 字符 序列 ,如 电话 号 码 、 邮 政 编码 ,社会 保障 号 等 
CustomValidator 允许 用 户 编写 自己 的 验证 逻辑 检查 用 户 的 输入 ,通常 用 于 奇偶 验证 
ValidationSummary 验证 总 结 , 以 摘要 的 形式 显示 页 上 所 有 验证 程序 的 验证 错误 


[Rd 


a 
[ee 








CompareValidator 





RangeValidator 





RegularExpressionValidator 











5.4.1 必须 输入 验证 控件 


在 实际 的 应 用 中 (如 在 用 户 填 写 表单 时 ) 有 一 些 项 目 是 必 填 项 ,例如 用 户 名 和 密码 。 使 
必须 输入 验证 控件 (RequiredFieldValidator) 能 够 要 求 用 户 在 特定 的 控件 中 必须 提供 相应 
信息 ,否则 就 提示 错误 信息 。RequiredFieldValidator 控件 的 格式 如 下 : 
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< asp:RequiredFieldValidator ID = "控件 名 称 ”runat = " server" 
ControlToValidate = "要 检查 的 控件 名 称 " 
ErrorMessage = "出 错 信息 " Display = "DYnamic | Static | None" /> 


示例 代码 如 下 : 


<form id = "forml" runat = "server"> 
<div > 用户 名 : 
<asp:TextBox ID = "txtName" runat = "server"></asp:TextBox > 
<asp:RequiredFieldValidator ID= "Validator1l" runat = "server" 

ControlToValidate = " txtName" ErrorMessage = "用 户 名 不 能 为 空 " Display = "Static"> 
</asp:RequiredFieldValidator > <br /> 

密 ” 码 :<asp:TextBox ID = "txtPass" runat = "server"></asp:TextBox> <br /> 
<asp:Button ID = "Validatel" runat = "server" Text = "登录 " /> <br /> 
</div> 
</form> 


在 上 述 代码 中 ,RequiredFieldValidator 控件 通过 它 的 ControlToValidate 属性 绑 定 了 
一 个 文本 控件 txtName( 要 验证 的 控件 ), 当 输入 值 为 空 且 单 击 OK 按钮 时 ,提示 错误 信息 
“用 户 名 不 能 为 空 ”, 如 图 5-13 所 示 。 此 时 用 户 的 所 有 页 面 输入 都 不 会 提交 ,只 有 将 必 填 输 
入 项 都 填写 完成 ,页 面 才 会 向 服务 器 提交 数据 。 


(| eewocnosaao p » ©| reqviredrieiavaids.. x| 


用 户 名 :| 用 户 名 不 能 为 空 




















图 5-13 RequiredFieldValidator 验证 控件 


值得 注意 的 是 ,RequiredFieldValidator 控件 的 Initialvalue 属性 (表示 要 验证 的 字段 的 
初始 值 ) 默 认 值 为 空 串 , 因 此 当 用 户 什么 都 不 输入 而 直接 单 击 提交 按钮 时 将 显示 出 错 , 仅 当 
输入 控件 失去 焦点 ,而 且 用 户 在 此 输入 控件 中 输入 的 值 等 于 Initialvalue 属性 的 值 时 ， 
RequiredFieldValidator 控件 才 认 为 其 数据 不 能 通过 验证 。 


5.4.2 比较 验证 控件 


比较 验证 控件 (CompareValidator) 可 以 对 比 在 两 个 控件 中 输入 的 数据 。 例 如 在 修改 密 
人 码 时 ,通常 需要 在 两 个 文本 框 中 分 别 输 入 一 次 新 密码 ,并 对 两 次 输入 的 密码 进行 比 对 。 
CompareValidator 控件 的 格式 如 下 : 








< asp:CompareValidator ID = "控件 名 称 ” 
ControlToValidate = "要 验证 的 控件 ID" 
ControlToCompare =" 要 比较 的 控件 ID" 
Type ="String | Integer | Date |Double| Currency" 
Operator = "Equal|NotEqual| 
GreaterThan| GreaterThanEqual|LessThan|LessThanEqual|DataTYPpeCheck"” 


第 5 章 ”Web Form 技 术 1s) 


ErrorMessage = "出 错 信息 " Display = "Dynamic | Static | None" 
runat = "server" /> 


CompareValidator 控件 的 属性 见 表 5-14。 
表 5-14 CompareValidator 控件 的 属性 
属 性 说 明 
ControlToValidate ”| 要 验证 的 控件 ID 


ControlToCompare 用 于 进行 比较 的 控件 ID 
表示 要 比较 的 两 个 值 的 数据 类 型 , 取 值 有 5 种 , 即 String、 Integer、Date、Double、 























Type 
Currency 
Operator 表示 要 使 用 的 比较 运算 符 
ErrorMessage 出 错 提示 信息 
Text 当 验 证 的 控件 无 效 时 显示 的 验证 程序 文本 
Display 验证 程序 的 显示 方式 , 取 值 包括 3 种 , 即 Dynamic,Static、 None 





SetFocusOnError 控件 无 效 时 验证 程序 是 否 在 控件 上 设置 焦点 ,默认 为 false 
ValueToCompare 用 于 进行 比较 的 值 











注意 ,用 户 也 可 以 直接 将 与 CompareValidator 控件 相关 联 的 输入 控件 的 值 与 某 个 特定 
值 进行 比较 ,只 需 将 CompareValidator 控件 的 ValueToCompare 属性 设 定 为 要 比较 的 特定 
值 即 可 。 在 这 种 情况 下 不 需要 另外 指定 ControlToCompare 属性 。 

CompareValidator 控件 的 示例 代码 如 下 : 


<form id = "form2" runat = " server"> 
<div > 密码 1: 
<asp:TextBox ID = "passwdl" TextMode = "Password" runat = "server" /> 
<br /> 密码 2: 
<asp:TextBox ID = "passwd2" TextMode = "Password" runat = "server" /> 
<asp:CompareValidator ID = "Validator2" runat = "server" 
ControlToVal idate = "passwdl" ControlToCompare = "passwd2" 
Type= "String" Operator = "Equal" 
Display = "static" ErrorMessage = "两 者 不 一 致 "> 
</asp:CompareVal idator > 
<br /><asp:Button ID = "Validate2" runat = "server" text =" 验证 " /> 
</form > 


在 上 述 代 码 中 判断 两 个 密码 输入 框 passwdl 和 passwd2 中 的 输入 值 是 否 一 致 ,比较 类 
型 为 String ,比较 运算 符 为 Equal, 因 此 如 果 不 相 等 则 提示 出 错 , 如 图 5-14 所 示 。 


(Oe wo oo] 


乱 Comparevalidator x 
窗 码 1， [eeveens 


密码 2，|eee*ood | 两 者 不 一 到 
[天 下 | 



















图 5-14 CompareValidator 控件 
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5.4.3 范围 验证 控件 


范围 验证 控件 (RangeValidator) 可 以 要 求 用 户 输入 特定 范围 内 的 数据 。 该 控件 可 以 检 
户 的 输入 是 否 在 指定 的 最 大 值 与 最 小 值 之 间 ,通常 情况 下 用 于 检查 数字 日期、 货币 等 。 
属性 如 表 5-15 所 示 。 


















































并 障 
于 型 











表 5-15 范围 验证 控件 的 属性 
属 性 说 明 
ControlToValidate | 要 验证 的 控件 ID 
Maximum Value 指定 有 效 范围 的 最 大 值 
MinimumValue 指定 有 效 范围 的 最 小 值 
Type 要 比较 的 值 的 数据 类 型 , 取 值 有 5 种 , 即 String、Integer、Date、Double、Currency 
ErrorMessage 出 错 提示 信息 




















RangeValidator 控件 的 示例 代码 如 下 : 


<form id = "form3" runat = "server"> 
<div > 请 输入 生日 : 
<asp:TextBox ID = "TextBoxl"” runat = "server"></asp:TextBox> 
<asp:RangeValidator ID = "RangeVal idator1l”runat = "server" 
ControlToVal idate = "TextBox1l" ErrorMessage = "超出 规定 范围 " 
MaximumValue = "2017/1/1" MinimumValue = "1990/1/1" Type = "Date"> 
</asp:RangeValidator > <br /> 
<asp:Button ID = "Validate3" runat = "server" Text =" 验证 " /> 
</div> 
</form > 


在 上 述 代码 中 要 求 用 户 输入 生日 的 日 期 ,MinimumValue 属性 和 MaximumValue 属性 
分 别 指定 了 输入 范围 的 下 限 和 上 限 , 比 较 类 型 为 日 期 型 , 当 用 户 的 输入 超出 范围 时 提示 错 
误 ,如 图 5-15 所 示 。 


一 3 CE 
BaD 1) np/nocalhosts1208/Defouhaspx B PD- ox 











上 请 输入 生日 : 201706363 ”超出 规定 范围 














图 5-15 RangeValidator 控件 


5.4.4 正则 表达 式 验证 控件 
在 实际 的 验证 过 程 中 经 常 需要 对 用 户 输 入 进行 一 些 复杂 的 格式 验证 。 例 如 要 求 用 户 按 
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照 *( 区 号 ) 电 话 号 码 ” 的 格式 输入 电话 号 码 , 或 者 按照 电子 邮件 、 身 份 证 号 的 格式 进行 输入 
等 ,这 就 需要 用 到 正则 表达 式 验证 控件 (RegularExpressionValidator) 。 
所 谓 正 则 表达 式 ,就 是 比 通常 用 的 * 和 ? 通配符 更 复杂 的 一 种 字符 串 定义 规则 。 例 如 : 





[a-zA— 2]{3,6}[0—9]{6} 

















该 正则 表达 式 表示 可 以 输入 3 一 6 个 任意 字母 和 6 个 数字 。 其 中 限定 符 的 含义 如 表 5-16 





所 示 。 


表 5-16 正则 表达 式 中 的 限定 符 


说 明 





表示 可 以 输入 的 字符 表达 式 





表示 所 有 的 小 写字 母 





表示 所 有 的 大 写字 母 





表示 所 有 的 数字 





表示 限定 的 表达 式 必 须 出 现 n 次 





表示 限定 的 表达 式 至 少 出 现 n 次 





表示 限定 的 表达 式 必须 出 现 n~m 次 





表示 一 个 字符 





表示 任意 个 字符 





表示 所 限定 的 表达 式 出 现任 意 次 





表示 所 限定 的 表达 式 出 现 0 次 或 1 次 





表示 “或 者 ” 





表示 限定 表达 式 的 开头 





表示 限定 表达 式 的 结尾 





匹配 限定 符 本 身 





\d 








指定 输入 的 值 是 一 个 数字 


使 用 正则 表达 式 能 够 实现 字符 串 格式 匹配 验证 ,RegularExpressionValidator 控件 的 功 
能 就 是 确定 输入 控件 的 值 是 否 与 某 个 正则 表达 式 所 定义 的 模式 相 匹 配 。 在 该 控件 的 属性 列 
表 中 选择 ValidationExpression 属性 可 以 看 到 系统 提供 的 常用 正则 表达 式 , 如 图 5-16 所 示 。 
































图 5-16 系统 提供 的 正则 表达 式 


当 在 系统 提供 的 正则 表达 式 中 进行 了 选择 并 指定 了 要 验证 的 控件 后 ,系统 自动 生成 的 


HTML 代码 如 下 : 
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<asp:RegularExpressionValidator ID = "RegularExpressionValidator1" runat = "server" 
ControlToVal idate = "TextBox1" 
ErrorMessage = "格式 不 匹配 " 
ValidationExpression="\w+ ([—+.']\wt+)x@\w+([—.]\w+t)x*\.\wt+([—.]\w+)x*"> 
</asp:RegularExpressionVal idator > 





在 上 述 代码 中 属性 ValidationExpression 指定 正则 表达 式 ,程序 运行 后 , 当 用 户 单 击 按 
钮 时 ,如 果 输 入 的 信息 与 正则 表达 式 不 匹配 , 则 提示 错误 信息 ,如 图 5-17 所 示 。 





[EEC 

















图 5-17 RegularExpressionValidator 控件 


同样 ,也 可 以 自 定义 正则 表达 式 来 规范 用 户 的 输入 。 例 如 ,比较 常用 的 正则 表达 式 
如 下 。 

。 只 允许 输入 数字 : [0-9] x 

。 只 允许 输入 位 数字 : \d{n}) 或 [0-9]{n) 

。 只 能 输入 7 一 位 数字 :\d{n,m} 或 [0-9]{n,m)} 

。 可 以 输入 3 一 6 个 字母 : [a-zA-Z]{3,6} 

。 验证 E-mail 格式 ; . {1,)@. {1,)\. [a-zA-Z]{2,3} 

。 电话 号 码 : [0-9]{3,4)-[0-9]{7,8} 

。 18 位 身份 证 号 码 : [0-9]{6}[12JL0-9]{3}[01JL0-9][0123JL0-9][L0-9]{3}[12] 

RequiredFieldValidator 控件 通常 和 文本 框 控件 一 起 使 用 ,以 检查 电子 邮件 ID .电话 号 
码 、 信 用 卡号 码 ,用户 名 和 密码 等 是 否 有 效 。 

需要 注意 的 是 , 当 用 户 输 入 为 空 时 ,除了 RequiredFieldValidator 控件 外 ,其 他 的 验证 控 
件 都 能 验证 通过 ,所 以 这 些 验证 控件 通常 需要 和 RequiredFieldValidator 控件 一 起 使 用 。 


5.4.5 自 定义 验证 控件 


前 述 的 数据 验证 控件 已 经 提供 了 许多 验证 功能 ,然而 有 时 还 需要 特殊 的 数据 验证 。 例 
如 在 网 上 购物 时 需要 验证 用 户 提供 的 银行 账户 中 是 否 有 足够 的 余额 可 供 支付 货款 ,等 等 。 
为 了 满足 这 种 数据 验证 的 需要 ,可 以 使 用 自 定 义 验证 控件 (CustomValidator) 。 

CustomValidator 控件 的 使 用 方法 与 其 他 验证 控件 的 使 用 方法 基本 一 致 ,也 有 
ControlToValidate 和 ErrorMessage 等 属性 。 其 特殊 之 处 在 于 它 提供 了 一 个 ServerValidate 事 
件 , 可 以 在 此 事件 中 编写 完成 数据 验证 的 代码 。 

包含 CustomValidator 控件 的 HTML 代码 如 下 : 
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<form ID = "form4" runat = "server"> 

<div > 请 输入 系统 密码 : 

<asp:TextBox ID = "passwd4" TextMode = "Password" runat = "server" /> 

<asp:CustomValidator ID = "CustomValidator1l" runat = "server" 
ControlToValidate = "passwd4" ErrorMessage = "输入 的 密码 不 正确 " 
onservervalidate= "CustomVal idator1l_ServerValidate"”> 

</asp:CustomValidator > 

<br/> 

<asp:Button ID = "btnLogin" runat = "server" text = " 登 录 " onclick = "btnLogin _ Click" /> 

<asp:Label ID = "lblmessage" runat = "server" text = ""></asp:Label > 

</form > 


ServerValidate 事件 的 处 理 程序 如 下 : 


protected void CustomValidatorl ServerValidate ( object source, ServerValidateEventArgs 
args) { 
string strVal = args.Value.ToUpper(); 
if ( strVal, Equals("administrator") ) { 
args. IsValid = true; 


} 
else{ 

args. IsValid = false; 
} 


j 
protected void btnLogin Click(object sender, System. EventArgs e) 
1 

if (CustomValidatorl. IsValid ) { 


lblmessage. Text = "密码 验证 通过 !"; 
} 


上 述 程序 运行 后 ,在 文本 框 中 输入 “administrator”, 则 密码 输入 正确 ,页 面 的 显示 结果 
如 图 5-18 所 示 。 




















图 5-18 CustomValidator 控件 














户 特 别 要 注意 数据 为 空 时 的 处 理 方法 。 在 默认 情况 下 ,如 果 相 关联 的 输入 控件 为 空 ， 
CustomerValidator 控件 将 不 进行 数据 验证 的 工作 。 如 果 需 要 处 理 输入 为 空 的 情况 ,可 将 
ValidateEmptyText 属性 设置 为 true,; 此 时 如 果 单 击 “ 登 录 ” 按 钮 ,将 显示 CustomerValidator 
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控件 设 定 的 出 错 信息 , 即 “ 输 入 的 密码 不 正确 ”。 


5.4.6 验证 总 结 控件 

















验证 总 结 控件 (ValidationSummary) 本 身 并 不 提供 任何 验证 , 它 可 以 和 其 他 验证 控件 一 
起 使 用 ,对 同一 页 面 的 多 个 验证 控件 集中 给 出 验证 结果 。 也 就 是 说 ,当前 页 面 有 多 个 错误 发 
生 时 ValidationSummary 控件 能 够 同时 捕获 多 个 验证 错误 并 呈现 给 用 户 ， 


















































其 显示 的 错误 信 

息 摘 要 都 是 由 该 页 面 的 其 他 验证 控件 的 ErrorMessage 属性 提供 的 。 

ValidationSummary 控件 的 常用 属性 如 表 5-17 所 示 。 

表 5-17 验证 总 结 控件 的 属性 
属 性 说 明 
， 错误 摘要 的 显示 方式 , 取 值 包括 3 种 , 即 List( 列 表 ) 、BulletList (项目 符号 列表 )、 
DisplayMode 
SingleParagraph( 单 个 段落 ) 

HeaderText 在 错误 摘要 中 显示 的 标题 文本 
ShowMessageBox | 是 否 在 弹出 的 消息 框 中 显示 错误 摘要 ,默认 为 false 
ShowSummary 是 否 在 页 面 上 显示 错误 摘要 ,默认 为 true 





值得 一 提 的 是 ,Page. IsValid 属性 检查 页 面 中 的 所 有 验证 控件 是 否 均 已 成 功 进行 验证 。 
该 属性 为 Web 窗 体 页 中 的 一 个 属性 ,如 果 页 面 验证 成 功 , 则 将 具有 值 true, 否则 将 具有 值 
false。 例 如 有 以 下 代码 : 


private void ValidateBtn Click(Object Sender，System. EventArgs e) { 
if (Page.IsValid == true) { 
lblMessage. Text = "页 面 有 效 "; 

} 


else { 


lblMessage. Text = "页 面 中 存在 一 些 错 误 "; 
} 
} 


65 用 户 控 件 


用 户 控 件 是 一 种 自 定义 的 、 可 复 用 的 组 合 控件 ,通常 由 系统 提供 的 可 视 化 控件 组 合 而 
成 。 程 序 员 可 以 将 一 些 反 复 使 用 的 部 分 用 户 界面 ( 既 包括 页 面 代码 ,也 包括 事件 处 理 程序 ) 
封装 成 一 个 控件 ,然后 像 使 用 普通 Web 控件 一 样 使 用 该 控件 。 


5.5.1 用 户 控 件 概 述 
1. 用 户 控件 的 基本 特点 





























如 果 要 理解 用 户 控 件 , 需 要 明确 以 下 几 点 : 
(1) 用 户 控件 是 实现 代码 与 内 容 分 离 ,代码 重用 的 技术 。 
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(2) 可 以 像 设计 Web 窗 体 一 样 设计 用 户 控件 ,并 定义 其 属性 和 方法 。 
(3) 用 户 控 件 可 以 单独 编译 ,但 不 能 单独 运行 ,必须 嵌入 到 Web 页 面 中 才能 运行 。 
































2. 用 户 控件 与 Web 窗 体 页 面 的 比较 


控件 与 普通 Web 页 面 非常 相似 ,都 具有 自己 的 用 户 界面 和 程序 代码 。 创 建 用户 控 
件 所 采用 的 方法 与 创建 Web 页 面 的 方法 基本 相同 。 
户 控件 与 普通 Web 页 面 之 间 也 存在 一 些 不 同 : 
(1) 用 户 控 件 的 扩展 名 为 .ascx 和 . ascx. cs, ASP. NET 页 面 的 扩展 名 是 . aspx 和 . aspx. cs。 
) 
) 
) 

















































































































(2) 用 户 控件 不 包含 < html >、< body > 和 < form > 标记 。 
(3) 用 户 控 件 不 包含 @Page 指令 ,而 是 @Control 指令 。 




















不 能 独立 地 请 求 用 户 控件 ,用 户 控件 必须 包括 在 Web 窗 体 页 面 内 才能 使 
5.5.2 创建 用 户 控件 


用 户 控 件 是 封装 成 可 复 用 控件 的 Web 窗 体 ,可 以 使 用 标准 Web 窗 体 页 面 上 相同 的 
HTML 元 素 和 Web 控件 来 设计 用 户 控件 。 创 建 一 个 用 户 控件 有 两 种 方式 : 一 种 是 直接 创 
建 用 户 控件 ; 另 一 种 是 将 已 经 设计 完成 的 Web 窗 体 页 面 改 为 用 户 控件 。 








1. 直接 创建 用 户 控件 


步骤 如 下 ; 

(1) 添加 一 个 新 的 用 户 控件 。 

打开 解决 方案 资源 管理 器 , 右 击 项 目 名 称 , 选 择 “ 添 加 新 项 "命令 ,出 现 如 图 5-19 所 示 的 
“添加 新 项 ”对 话 框 ,选择 “Web 用 户 控 件 ”, 默 认 的 用 户 控 件 名 称 为 WebUserControl. ascx, 假 设 
修改 名 称 为 myControl. ascx, 然 后 单 击 “ 添 加 ”按钮 , 则 该 用 户 控 件 会 添加 到 解决 方案 资源 
管理 器 的 项 目 列表 中 。 








| 4 Be 排序 依 实 于 认 值 -] 合 后 着 过 已 安 妆 模 丘 (Col + 日 Pp- 
| ; = 2 
ees Bost 加 smmezorw Visual ce Type Visual ce 
Vi 使 用 可 杭 化 设计 器 创建 的 ASP.NET 服务 器 
联机 藻 内 容 页 (Razor v3) Visual C# 上 控件 
攻 网 页 (Razor v3) Visual C# 
可 版 页 Visual cs 





| ADO.NET 实体 数据 楼 型 Visual C# 


彰 coficesciptx# VisualCs 属 
EE 
侣 称 (N): WebUserControLascx [加 桂 代 琶 故 在 单 王 的 文件 中 () 
DessenO 











图 5-19 “添加 新 项 ”对 话 框 
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此 时 可 以 看 到 该 用 户 控件 默认 包含 了 一 行 代码 : 











<%@ Control Language = "C 并 ”RutoEventWireuP = "true" 
CodeFile = "myControl.ascx.cs" 
Inherits = "myControl" %> 


说 明 : 

。 @ Control 指令 用 来 标识 用 户 控 件 , 正 如 @Page 指令 用 来 标识 Web 窗 体 一 样 。 

。 Language 一 "C#" 用 于 指定 用 户 控件 的 编程 语言 是 C#。 

。 AutoEventWireup 二 "true" 指 定 指示 控件 的 事件 与 处 理 程序 可 以 自动 匹配 。 

。 CodeFile 一 "myControl. ascx. cs" 指 定 所 引用 的 控件 代码 文件 的 路 径 。 

。 Inherits 二 "myControl" 指 定 用 户 控件 是 从 myControl 类 派生 的 。 

(2) 向 用 户 控 件 的 设计 页 面 (myControl. ascx) 中 添加 各 种 Web 控件 并 修改 其 属性 。 

例如 创建 一 个 用 户 控件 myControl. ascx, 如 图 5-20 所 示 。 它 里 面包 括 了 3 个 Web 控 
件 , 即 Label 控件 .TextBox 控件 和 Button 控件 。 











DO Websitel - Microsof Visual Studio(EE) 是 ”总 亿 寺 BB 动 (Qt Pil ar 
文件 月 篇 才 (和 ] 。 视 因 V) KS) 生成 (B) 油 3[D) EINM) Wl0) IR(T) NA) HFN) OW WoH) ga 加 
-9 各- 各国 由 | -8-| ocbwg -amcpu -| 360RSWR -月 马 -| 淹 -日 王牌 | 


he Cont rol Language="C8” hutoEventWireup="true” CodeFile="ayControl. ascx. cs” Inherits="WebUserControl” 镶 戌 
5 人 p) 请 输入 验证 友 

asp: TextHo’ TextHoxl” rur “0 asp: TextBor: 

p 

asp:Button ID="Buttonl” wt Text= 确定 


设计 [= 拆 分 |= 涯 | | 让 <p> 





图 5-20 用 户 控 件 示 例 
上 述 用 户 控件 的 页 面 代码 如 下 : 


<$ @ Control Language = "C#" AutogventWireup = "true" CodeFile = "myControl. ascx. cs" 
Inherits = "myControl" %> 

<p> 请 输入 验证 码 

<asp: TextBox ID = "TextBoxl" runat = "server"></asp: TextBox> </p> 

<p><asp:Button ID = "Button1" runat = "server" text = "确定 " /> </p> 


(3) 在 代码 文件 (myControl. ascx. cs) 窗 口中 给 该 用 户 控件 的 子 控件 编写 事件 响应 
代码 。 
在 myControl. ascx. cs 文件 的 编辑 窗口 中 可 以 编写 所 有 子 控件 的 事件 处 理 代 码 , 例 如 
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按钮 间 


志 


击 事件 *Buttonl_Click” 等 。 








protected void Buttonl_Click(object sender, EventArgs e) { 
至 此 ,一 个 用 户 控 件 就 创建 完成 了 。 
2. 将 已 有 的 Web 窗 体 页 面 改 为 用 户 控 件 


步骤 如 下 : 

(1) 删除 ASPX 文件 中 的 < html >、< body > 和 < form > 等 标记 ,因为 它们 可 能 与 包含 页 
面 有 冲突 。 

(2) 将 @Page 指令 改 为 @Control 指令 。 

(3) 在 代码 文件 中 定义 的 类 的 基 类 由 Page 类 改 为 UserControl 类 。 

(4) 将 文件 的 扩展 名 改 为 . ascx。 

由 于 用 户 控 件 不 能 作为 一 个 独立 的 网 页 来 显示 ,必须 添加 到 其 他 Web 窗 体 页 面 中 才能 
显示 运行 ,因此 用 户 控 件 不 能 设置 为 “初始 页 面 ”。 


5.5.3 用 户 控件 的 使 用 
将 用 户 控件 添加 到 Web 窗 体 页 面 中 也 有 两 种 方法 。 一 种 是 向 Web 窗 体 页 面 添加 该 控 
件 的 @Register 指令 和 标记 ,使 得 用 户 控件 成 为 页 面 的 一 部 分 ,这 样 就 能 够 在 页 面 中 显示 和 


使 用 ; 另 一 种 方法 是 通过 编程 方式 向 页 面 动态 地 添加 用 户 控件 。 
下 面 分 别 介绍 这 两 种 使 用 方式 。 





1. 直接 在 Web 窗 体 页 面 添 加 用 户 控件 


步骤 如 下 : 
(1) 在 页 面 的 顶部 添加 一 个 注册 该 控件 的 @Register 指令 ,以 便 在 处 理 Web 窗 体 页 面 
时 识别 该 控件 。 其 格式 如 下 : 


<%(@ Register 
TagPrefix = "namesapce" TagName = "controlname" Src="controlpath"” %> 


说 明 : 

TagPrefix 表示 确定 控件 的 唯一 命名 空间 ,是 标记 中 控件 名 称 的 前 缓 。 

TagName 表示 控件 的 名 称 , 即 标识 该 控件 的 一 个 标记 。 

Src 表示 用 户 控件 的 路 径 。 

(2) 在 页 面 的 主体 部 分 使 用 标记 的 形式 显示 该 控件 ,即使 用 在 上 一 步 注册 的 TagPrefix 
和 TagName 形成 一 个 标记 ,并 为 该 控件 指定 一 个 ID 和 设置 runat 属性 。 其 格式 如 下 : 

















< Tagprefix:Tagname ID = "ControlID" runat ="server" /> 
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例如 要 在 Web 页 面 中 使 用 在 5. 5. 2 节 中 创建 的 用 户 控件 myControl. ascx, 则 需要 在 
.aspx 文 件 中 编写 以 下 代码 : 








< 外 @Register TagPrefix= "myPre" TagName = "myName" Src= "myControl.ascx" %> 


<myPre:myName ID = "myCon" runat = "server" /> 














在 一 个 页 面 中 可 以 放置 同一 种 用 户 控件 的 多 个 实例 ,只 需要 保证 其 ID 值 不 同 即 可 。 
2. 通过 编程 方式 动态 地 添加 用 户 控件 


步 又 如 下 : 

(1) 使 用 @Reference 指令 注册 该 用 户 控 件 。 

(2) 使 用 LoadControl 方法 添加 该 控件 。 

(3) 使 用 Page 类 的 Controls. Add() 方 法 将 该 控件 加 载 到 该 页 面 。 
例如 : 


























<$% @ Reference control = "myControl.ascx" %> 
Control cl = LoadControl( "myControl.ascx"); 
Page, Controls. Add(c1); 


6.6 母 版 页 


母 版 页 (MasterPage) 是 一 种 ASP. NET Web Forms 页 面 ,也 是 ASP. NET 提供 的 一 种 
重用 技术 。 使 用 母 版 页 可 以 为 应 用 程序 中 的 页 面 创建 一 致 的 布局 。 母 版 页 定义 了 页 面 所 需 
的 外 观 和 标准 行为 ,然后 可 以 创建 包含 要 显示 内 容 的 各 个 内 容 页 面 。 当 用 户 请 求 内 容 页 面 
时 ,这 些 页 面 的 内 容 和 和 母 版 页 的 布局 将 组 合 在 一 起 输出 。 当 母 版 页 的 布局 或 风格 改变 时 ,其 
所 有 内 容 页 面 的 输出 就 会 立即 更 新 ,这 使 得 整个 页 面 的 外 观 改变 更 加 容易 。 


5.6.1 母 版 页 概述 


1. 母 版 页 的 基本 特点 


母 版 页 是 具有 扩展 名 . master 的 ASP. NET 文件 ,主要 由 母 版 页 本 身 (. master 文件 ) 和 
一 个 或 多 个 内 容 页 面 组 成 。 母 版 页 不 仅 包括 静态 文本 和 控件 ,还 包括 一 个 或 多 个 
ContentPlaceHolder 控件 ( 称 为 占 位 符 控件 ) ,这些 占 位 符 控件 定义 了 可 替换 内 容 出 现 的 区 
域 。 可 替换 内 容 是 在 内 容 页 面 中 定义 的 ,内 容 页 面 是 绑 定 在 母 版 页 的 . aspx 文件 ,通过 创建 
各 个 内 容 页 面 来 定义 母 版 页 的 占 位 符 控件 内 容 , 从 而 实现 页 面 的 内 容 设 计 。 

在 内 容 页 面 的 @Page 指令 中 通过 使 用 MasterPageFile 属性 来 指向 要 使 用 的 母 版 页 ,从 
而 建立 内 容 页 面 和 母 版 页 的 连接 ,映射 关系 如 图 5-21 所 示 。 例 如 一 个 内 容 页 面 @Page 指 
令 将 该 页 面 连接 到 Master. master 页 面 ,在 页 面 中 通过 添加 Content 控件 并 将 这 些 控 件 映 
射 到 母 版 页 上 的 ContentPlaceHolder 控件 来 创建 内 容 , 示 例 代码 如 下 : 
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<$% @ Page Title = "内 容 页 " Language = "C#" MasterPageFile = "~/MasterPage. master" %> 
<asp:Content ID = "Content1" ContentPlaceHolderID = "Main" Runat = "Server"> 
此 处 为 内 容 
</asp:Content > 





沪 








id="Main"runat="Server" Runat="Server"> 此 处 为 内 容 </asp:Content 


<asp:ContentPlaceHolder <asp:Content ContentPlaceHolderID="Footer" 
\ id="Footer'runat="Server"> Runat="Server”) 此 处 为 内 容 </asp:Content 





母 版 页 (A.master) 内 容 页 面 (A.aspx) 
<asp: ContentPlaceHolder “asp:Content ContentPlaceHolderID="Main" 

















2. 母 版 页 的 运行 机 制 
母 版 页 仅仅 是 一 个 页 面 模板 ,单独 的 母 版 页 是 不 能 被 用 户 所 访问 的 。 单 独 的 内 容 页 也 不 


能 够 使 用 。 母 版 页 和 内 容 页 有 着 严格 的 对 应 关系 。 母 版 页 中 包含 多 个 ContentPlaceHolder 
控件 ,那么 内 容 页 中 也 必须 设置 与 其 相对 应 的 Content 控件 。 当 客户 端 浏 览 器 向 服务 器 发 


出 请 求 要 求 浏览 某 个 内 容 页 面 时 ,ASP. NET 引擎 将 同时 执行 内 容 页 和 母 版 页 的 代码 ,并 将 


最 


必 
“添加 新 项 ”对 话 框 ,选择 “ 母 版 页 ”, 默 认 的 母 版 页 名 称 为 MasterPage. master, 然 后 单 击 “ 添 


终结 果 发 送 给 客户 端 浏 览 器 。 母 版 页 和 内 容 页 的 运行 过 程 可 以 概括 为 以 下 5 个 步 又 ， 
(1) 用 户 通过 输入 内 容 页 面 的 URL 来 请 求 某 页 。 
(2) 获取 内 容 页 面 后 读 取 @Page 指令 。 如 果 该 指令 引用 一 个 母 版 页 , 则 也 读 取 该 母 版 


1 。 如 果 是 第 一 次 请 求 这 两 页 , 则 两 页 都 要 进行 编译 。 


(3) 母 版 页 合并 到 内 容 页 的 控件 树 中 。 
(4) 各 Content 控件 的 内 容 合 并 到 母 版 页 相应 的 ContentPlaceHolder 控件 中 。 
(5) 呈现 得 到 结果 页 。 


5.6.2 创建 一 个 母 版 页 
打开 解决 方案 资源 管理 器 , 右 击 项 目 名 称 ,选择 “添加 新 项 "命令 ,出 现 如 图 5-22 所 示 


的 





加 ”按钮 , 则 该 母 版 页 会 添加 到 解决 方案 资源 管理 器 的 项 目 列表 中 。 


此 时 可 以 看 到 该 母 版 页 默认 包含 以 下 代码 : 


<$% @ Master Language = "C#" AutogventWireup = "true" CodeFile = "MasterPage. master. cs" 
Inherits = "MasterPage" %> 

<!doctype html > 

< html xmlns = "http://www. w3. org/1999/xhtml"> 

< head runat = "server"> 
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<meta http— equiv = "Content - Type" content = "text/html; charset =utf - 8"/> 


<title></title> 
<asp:ContentPlaceHolder id = "head" runat = "server"> 
</asp:ContentPlaceHolder> 


</head> 
<body> 


<form id = "forml" runat = "server"> 

<div> 
<asp:ContentPlaceHolder id = "ContentPlaceHolder1" runat = "server"> 
</asp:ContentPlaceHolder > 

</div> 

</form> 


</body > 
</html > 














IN MasterPage.master RP 





BE i -| 于 匡 要 吉 安江 (Cl+ 昌 2 
ey mscin nn Vieal cs Type veualce 
Visual Ce Web 应 用 得 序 的 后 属 思 
四 和 Viual ce | | 
[3 Web 定 休 Visual Ce 
国 smaznecor Visual cs 
加 zsmneca Visual ce 
加 se Visual ce 
加 sammeora Visual ce 
加 me Visusl ce 





Veualce 下 | 








图 5-22 “添加 新 项 ”对 话 框 


说 明 : 


@Master 指令 用 来 标识 母 版 页 ,正如 (@Page 指令 用 来 标识 Web 窗 体 一 样 。 
Language 一 "C#" 用 于 指定 用 户 控件 的 编程 语言 是 C#。 

AutoEventWireup 一 "true" 指 定 指示 控件 的 事件 与 处 理 程序 可 以 自动 匹配 。 
CodeFile 二 "MasterPage. master. cs" 指定 所 引用 的 控件 代码 文件 的 路 径 。 

Inherits 一 "MasterPage" 指定 母 版 页 是 从 MasterPage 类 派生 的 。 

新 建 母 版 页 中 自动 生成 了 两 个 ContentPlaceHolder 控件 , 它 是 预 留 给 内 容 页 面 显 
示 的 控件 。 其 中 一 个 在 head 区 ,默认 ID 是 head; 另 一 个 在 body 区 ,默认 ID 是 
ContentPlaceHolderl 。 


母 版 页 中 包含 的 是 页 面 的 公共 部 分 ( 即 网 页 模板 ) ,在 创建 示例 之 前 必须 判断 哪些 内 容 
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是 公共 部 分 ,例如 图 5-23 所 示 的 页 面 结构 图 。 页 面 由 4 个 部 分 组 成 , 即 标题 .菜单 、 页 脚 和 
内 容 。 











页 脚 区 域 





图 5-23 页 面 结构 图 


其 中 ,标题 .菜单 和 页 脚 区 域 是 网 站 中 常见 的 公共 部 分 ,可 以 用 母 版 页 来 创建 ,< form > 
</form > 标记 之 间 的 主要 示例 代码 如 下 (MasterPage. master) ; 


<form id = "forml" runat = "server"> 
<div id= "main"> 
<div id = "head"><hl style= "margin:10px 0 0 10px"> 母 版 页 设计 视图 </hl ></div> 
<div id = "content"> 
<div id= "left"> 
<h3 style= "margin:10px 0 0 10px"> 左 侧 导 航 </h3 > 
<div style=" margin— left:20px; font- size:18px; font - family:Verdana"> 
<a href = "TestPage. aspx"> Asp. net </a><br /> 
<a href = "AnotherTestPage.aspx"> CSS </a><br /> 
<a href ="#">HIML </a><br /> 
<a href ="#">JQuery </a> 
</div> 
</div> 
<div> 
<asp:ContentPlaceHolder id = "ContentPlaceHolder1" runat = "server"> 
</asp:ContentPlaceHolder > 
</div> 
</form> 


内 容 区 域 是非 公 共 部 分 ,可 以 用 内 容 页 面 来 创建 ,示例 代码 如 下 (Default. aspx) : 


<% @ Page Title="" Language = "C#" MasterPageFile= "~ /MasterPage. master" AutogventWireup 
= "true" CodeFile = "Default.aspx.cs" Inherits = "Default" %> 
<asp:Content ID = "Content1" ContentPlaceHolderID = "head" Runat = "Server"> 
<div style=" width:100% ; height:100% ; "> 
<div style=" margin:10px 0 0 10px"> 
<h4> 这 里 是 一 个 内 容 页 (TestPage. aspx) </h4 > 
<p style=" font— size:12px; font - family: 宋 体 "> 
Snbsp; gnbsp;&nbsp; &nbsp; 内容 页 包含 您 希望 显示 的 内 容 . 
</p> 
</div> 
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</div> 
</asp:Content > 


图 5-24 显示 了 MasterPage. master 文件 的 设计 视图 ,至 此 母 版 页 创建 完成 。 





| Os hp//Nocalhost50047/Deiauh2= BD- Scx 
一 x bd “se 











图 5-24 母 版 页 设计 视图 


5.6.3 使 用 母 版 创建 网 页 


本 节 使 用 上 面 创建 的 母 版 文件 MasterPage. master 建立 一 个 网 页 ,步骤 如 下 : 
(1) 打开 母 版 文件 所 在 的 项 目 ,选择 “添加 新 项 ”命令 ,弹出 如 图 5-25 所 示 的 对 话 框 , 选 
中 右 下 角 的 "选择 母 版 页 ” 复 选 框 创建 一 个 窗 体 页 面 Default. aspx。 





我 在 已 二 半 榜 白 (Col+ 晶 
了 天王 Visual c* 
Web 应 用 程序 的 禄 体 








5-25 用 母 版 创建 Web 窗 体 
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图 5-26 选择 母 版 页 
(3) 使 用 母 版 创建 的 新 页 面 如 图 5-27 所 示 ,新 页 面 已 经 应 用 了 模板 中 的 设计 ,在 内 容 
区 域 可 以 进行 自由 编辑 ,其 他 区 域 均 不 可 编辑 。 


Ca i 
C/oorsooou Bp-scx] ns 
一 








图 5-27 用 母 版 创建 的 新 页 面 


€.3 习题 与 上 机 练习 


1. 选择 题 
(1) 下 列 控件 中 不 能 执行 鼠标 单 击 事件 的 是 ( bp 
A. ImageButton B. ImageMap C. Image D. LinkButton 





(2) 下 面 不 属于 容器 控件 的 是 ( ys 
A. Panel B. CheckBox C. Table D. PlaceHolder 


174 


ASP .NET web 应 用 开发 技术 ( 第 2 版 ) 


(3) 下 面 对 ASP. NET 控件 的 说 法 正确 的 是 ( 5 
A. 可 以 在 客户 端 直接 验证 用 户 的 输入 信息 并 显示 错误 信息 
B. 对 一 个 下 拉 列 表 控 件 不 能 使 用 验证 控件 
C. 服务 器 验证 控件 在 执行 验证 时 必须 在 服务 器 端 执行 
D. 对 验证 控件 不 能 自 定义 规则 
(4) 如 果 要 将 TextBox 控件 设置 成 多 行 输入 ,TextMode 属性 必须 设置 成 ( Js 











A. Singleline B. Multiline C. Password D. Textarea 
(5) 下面 的 ( ) 控 件 不 能 对 Web 页 上 的 输入 控件 进行 验证 。 
A. RangeValidator B. ValidationSummary 
C. RegularExpressionValidator D. CompareValidator 
(6) 如 果 需 要 确保 用 户 输入 大 于 100 的 值 ,应 该 使 用 ( ) 控 件 。 
A. RequiredFieldValidator B. RangeValidator 
C. CompareValidator D. RegularExpressionValidator 
2. 填空 题 
(1) CheckBox 控件 的 属性 值 指 示 是 否 已 选中 该 控件 。 
(2) 使 用 ListBox 控件 的 属性 获取 列表 控件 项 的 集合 ,使 用 属性 获 
取 或 设置 该 控件 的 选择 模式 。 
(3) 设置 属性 可 以 决定 Web 服务 器 控件 是 否 可 用 。 
(4) 如 果 需 要 将 多 个 单独 的 RadioButton 控件 形成 一 组 具有 RadioButtonList 控件 的 
功能 ,可 以 将 属性 设置 成 相同 的 值 。 
3. 上 机 练习 


(1) 编写 用 户 注册 页 面 register. aspx, 选 择 适当 的 Web 服务 器 控件 实现 以 下 功能 : 给 


和 人 姓名、 性 别 ,生日 .出 生地 、 联 系 电话 等 ,必要 时 用 验证 控件 进行 验证 。 当 用 户 单 击 “ 提 交 ?” 
按钮 后 显示 输入 的 信息 。 


(2) 编写 程序 exam. aspx, 显 示 5 个 单项 选择 题 ,用 户 选择 答案 并 提交 后 给 出 分 数 。 





Web 应 


所 以 通常 需要 使 
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程序 从 传统 意义 上 来 说 是 无 状态 的 ,不 能 像 Win Form 那样 维持 客户 端 状态 ， 














的 开发 提供 设置 .配置 以 及 检索 等 功能 。 


.NE- 





例 而 直接 访问 它 介 


~ Frame 

















日 内 置 对 象 进行 客户 端 状 态 的 保存 。 这 些 内 置 对 象 能 够 为 Web 应 用 程序 


work 包含 一 个 内 置 的 对 象 类 库 。 在 脚本 中 可 以 不 必 创 建 这 些 对 象 的 实 
的 属性 、 方 法 和 数据 集合 。 通 过 这 些 对 象 可 以 获取 客户 端 请 求 .输出 响应 





信息 、 管 理应 用 程序 会 话 、 存 储 用 户 信 息 、 保 存 状态 信息 等 ,如 表 6-1 所 示 。 


表 6-1 常用 的 ASP.NET 内 置 对 象 











对 象 名 功 能 ASP. NET 类 
Page 用 于 设置 与 网 页 有 关 的 属性 、 方 法 和 事件 
Request 读 取 客 户 端 所 提交 的 数据 HttpResponse 
Response 发 送信 息 到 客户 端 HttpRequest 





Application 


为 所 有 用 户 提供 共享 信息 


HttpApplicationState 























Session 存储 特定 用 户 的 信息 ,可 以 在 同一 网 站 的 多 个 页 面 间 共享 信息 ”| HttpSessionState 
Cookie 在 客户 端的 磁盘 上 保存 用 户 的 数据 HttpCookie 
Server 提供 服务 器 端的 属性 和 方法 HttpServerUtility 
Context 封装 了 每 个 用 户 的 会 话 、 当 前 HTTP 请 求 和 请 求 页 的 信息 HttpContext 
ViewState 在 同一 个 页 面 的 多 次 请 求 间 保存 状态 信息 StateBag 

Trace 用 于 对 页 面 进行 跟踪 TraceContext 





(6.1 HTTP 请 求 处 理 
“| 


6.1.1 


Response 对 象 
接 发 送信 息 给 客户 端 . 寻 


Response 对 象 











动态 生成 的 结果 以 HTML 格式 返回 到 客户 端的 浏览 器 。 











1. Response 对 象 的 方法 


Response 对 象 的 常用 方法 见 表 6-2。 


属于 HttpResponse 类 。 它 主要 用 于 动态 地 响应 客 
和 定向 URL ,在 客户 端 设置 Cookies 等 。Response 对 象 将 服务 器 端 


户 端的 请 求 , 包 括 直 
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表 6-2 Response 对 象 的 常用 方法 






































方 法 说 明 
AppendCookie 将 一 个 HTTP Cookie 添加 到 内 部 Cookies 集合 
AppendToLog 将 日 志 信息 添加 到 IIS 日 志文 件 中 
BinaryWrite 将 一 个 二 进 制 字 符 串 写 人 HTTP 输出 流 
Clear 清除 服务 器 缓存 中 的 所 有 数据 
Flush 把 服务 器 缓存 中 的 数据 立刻 发 送 到 客户 端 
End 停止 处 理 当前 文件 并 返回 结果 
Redirect 用 于 页 面 的 跳 转 ,使 浏览 器 重 定 向 到 另 一 个 URL 
Write 直接 向 客户 端 输出 数据 
WriteFile 向 客户 端 输出 文本 文件 的 内 容 


2. Response 对 象 的 属性 
Response 对 象 的 常用 属性 见 表 6-3。 
表 6-3 Response 对 象 的 常用 属性 
































属 性 说 明 
Buffer 指定 页 面 输出 时 是 否 需 要 缓冲 区 
Cache 获得 网 页 的 缓存 策略 (过 期 时 间 、 保 密 性 等 ) 
Charset 设置 输出 到 客户 端的 HTTP 字符 集 
ContentEncoding 获取 或 设置 输出 流 的 HTTP 字符 集 
ContentType 获取 或 设置 输出 流 的 MIME 类 型 ,默认 为 text/ HTML 
Cookies 用 于 获取 HttpResponse 对 象 的 Cookie 集合 
Expires 设置 页 面 在 浏览 器 中 缓存 的 时 限 ,以 分 钟 为 单位 
IsClientConnected 表明 客户 端 是 否 与 服务 器 端 连接 ,其 值 为 true 或 false 
Output 启用 到 输出 HTTP 响应 流 的 文本 输出 
Status 服务 器 返回 的 状态 行 的 值 





下 面 通 过 几 个 简单 的 示例 来 说 明 Response 对 象 的 属性 和 方法 的 应 用 。 
例 6-1 检查 客户 端的 联机 状态 (使 用 IsClientConnected 属性 和 Redirect 方法 ,06-01. 


aspx)。 


protected void Page Load(object sender, EventArgs e) { 
// 判断 客户 端 是 否 与 服务 器 连接 
if (Response. IsClientConnected) 
Response. Redirect( "other. aspx"); // 跳 转 到 当前 目录 的 另 一 个 页 面 
else 


Response. End(); // 停止 执行 当前 页 面 的 代码 


在 上 述 代码 中 ,通过 IsClientConnected 属性 指示 客户 端 是 否 仍 连接 在 服务 器 上 ,如 果 
是 ,实现 页 面 跳 转 ,否则 停止 当前 页 面 的 执行 。 
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例 6-2 判断 向 客户 端的 输出 (使 用 Buffer 属性 和 Flush Clear、Write 方法 等 ,06-02. 


aspx)。 


protected void Page Load(object sender, EventArgs e) { 








Response. Buffer = true; // 设置 服务 器 缓冲 为 true 
int currentHour = DateTime. Now. Hour; // 获取 当前 时 间 的 小 时 数 
证 (currentHour == 0) { 
Response. Nrite(" 时 间 到 ,服务 器 将 停止 输出 "); 
Response. Flush( ); // 立即 发 送 缓冲 区 中 的 数据 
Response. Clear(); // 清除 缓冲 区 中 的 全 部 数据 
Response. End( ); // 停止 执行 代码 

} 

else{ 
Response. Write(" 服 务 器 正常 工作 中 .……. 2 

| 


} 


在 实际 应 用 中 ,服务 器 可 能 需要 取消 向 客户 端的 输出 ,这 时 可 以 先 通 过 Clear 方法 清除 
缓冲 区 ,然后 利用 End 方法 停止 输出 操作 。 





3, 使 用 Response 对 象 设置 Cookie 


Response 对 象 的 数据 集合 只 有 一 个 , 那 就 是 Cookies 集合 。 利 用 Response. Cookies 的 
Add 方法 可 以 创建 一 个 新 的 会 话 Cookie, 格 式 如 下 : 


Response. Cookies. Add(Cookies 对 象 名 ) ; 

例如 : 

HttpCookie myCookie = new HttpCookie("Username"); // 创建 一 个 Cookie 

myCookie. Value = " 张 三 "; 

Reponse. Cookies. Add( myCook ie); // 将 新 Cookie 加 入 Cookies 集合 中 
上 述 代码 也 可 以 简化 为 : 


Reponse. Cookies["Username"] = " 张 三 "; 


6.1.2 ”Request 对象 














Request 对 象 用 于 获取 从 客户 端的 浏览 器 提交 给 服务 器 的 信息 。 这 些 信息 包括 
HTML 表单 数据 `\URL 地 址 后 的 附加 字符 串 、 客 户 端的 Cookies 信息 、 用 户 认证 等 。 








1. Request 对 象 的 属性 








Request 对 象 的 常用 属性 如 表 6-4 所 示 , 包 括 4 种 常见 的 数据 集合 (Collection ), 即 
QueryString 集合 .Form 集合 .Cookies 集合 .ServerVariables 集合 等 。 
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表 6-4 Request 对 象 的 常用 属性 
属 性 说 明 





Browser 取得 客户 端 浏览 器 的 信息 





ClientCertificate 取得 当前 请 求 的 客户 端 安 全 证 书 





ContentEncoding “| 取得 客户 端 浏览 器 的 字符 设置 


























ContentType 取得 当前 请 求 的 MIME 类 型 
Cookies 取得 客户 端 发 送 的 Cookies 数据 
Form 取得 客户 端 利用 POST 方法 传递 的 数据 
HttpMethod 当前 客户 端 提交 数据 的 方式 (GET/POST) 

a 取得 客户 端 利 用 GET 方法 传递 的 数据 (以 名 - 值 对 表示 的 HTTP 查询 字符 串 变 量 
QueryString 

的 集合 ) 

Params 获得 以 名 - 值 对 表示 的 QueryString、Form、Cookie 和 ServerVariables 组 成 的 集合 
ServerVariables 取得 Web 服务 器 端的 环境 变量 信息 
TotalBytes 从 客户 端 接收 的 所 有 数据 的 字 节 大 小 





UserHostAddress | 取得 客户 端 主机 的 IP 地 址 





UserHostName 取得 客户 端 主机 的 DNS 名 称 





引用 集合 的 格式 如 下 : 
Request. 集合 名 ("变量 名 ") 


下 面 根据 功能 分 别 对 这 些 集合 加 以 介绍 。 

1) 获取 客户 端 提交 的 表单 数据 

客户 端 通过 HTML 的 Form 表单 向 服务 器 提交 数据 。 

通常 提交 数据 有 POST 和 GET 两 种 方法 。 当 客户 端 使 用 GET 方法 提交 时 服务 器 通 
过 QueryString 集合 获取 数据 。 当 客户 端 有 大 量 信息 需要 输入 时 ,通常 使 用 POST 方法 提 
交 , 服 务 器 通过 Form 集合 获取 输入 数据 。 

GET 方法 将 表单 数据 作为 参数 直接 附加 到 URL 地 址 的 后 面 , 附 加 参数 和 URL 地 址 
之 间 用 “?” 来 连接 。 由 于 浏览 器 的 地 址 栏 的 长 度 有 限制 ,因此 也 限定 了 提交 数据 的 长 度 。 

附加 参数 的 格式 如 下 : 


URL?Variable = Value 
URL?Variablel = Valuel&Variable2 = Value2 











其 中 ,Variable 是 通过 HTTP 传递 过 来 的 变量 名 或 GET 方式 提交 的 表单 变量 。 当 有 
多 个 参数 变量 时 以 “&.” 符 号 来 连接 。 
例如 : 





http://www. sina. com/news. asp?userid = 22306  // 符号 ?后 的 userid 是 参数 变量 


服务 器 获取 数据 时 采用 


Request. Querystring ("userid") // 读 取 表 单 中 userid 输入 域 的 值 
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使 用 POST 方法 提交 数据 后 服务 器 通过 Form 集合 取出 用 户 输 入 的 信息 。 例 如 : 











Request. Form ("userid") 


注意 ; 可 以 省 略 Request 后 的 Querystring 或 Form 集合 名 ,而 直接 采用 Request(" 变 
量 名 ") 的 形式 。 例 如 直接 使 用 Request("username"), 等 价 于 Request. Form("username") 
或 Request. Querystring ("username") 的 结果 。 

2) 读 取保 存 的 Cookie 信息 

如 果 要 从 Cookies 中 读 取 数据 , 则 要 使 用 Request 对象 的 Cookies 集合 ,其 格式 如 下 : 


Request. Cookies["Cookies 名 称 " ] 


例如 : 


HttpCookie MyCookie = Request.Cookies["Username"]; 
string myName = MyCookies,. Value; 


在 BBS 或 聊天 室 中 经 常 将 用 户 登录 时 输入 的 用 户 


Cookie 中 ,这 样 在 后 面 的 程序 中 就 可 以 比较 容易 地 调 月 





3) 读 取 服务 器 端的 环境 变量 
ServerVariables 集合 用 于 获取 系统 的 环境 变量 信息 ,使 用 的 语法 格式 如 下 : 


Request. ServerVariables(" 环 境 变 量 名 ") 


或 


Request(" 环 境 变 量 名 ") 


// 获取 Cookie 对 象 
// 读 取 Cookie 值 


名 或 昵称 (如 nickname) 保 存在 


日 该 用 户 的 昵称 了 。 


例如 使 用 下 列 语句 能 够 在 页 面 中 显示 客户 端的 IP 地 址 。 


Request. ServerVariables("REMOTE ADDR") 





表 6-5 是 部 分 环境 变量 名 ,通过 它们 可 以 得 到 ServerVariables 集合 内 存储 的 对 应 的 变 




















表 6-5 ServerVariables 环境 变量 
环境 变量 名 说 明 
ALL_HTTP 客户 端 发 送 的 所 有 HTTP 标题 
CERT_COOKIE 客户 端 验证 的 唯一 ID, 以 字符 串 方 式 返回 
CONTENT_LENGTH 客户 端 提交 的 正文 长 度 
CONTENT_TYPE 正文 的 数据 类 型 ,可 用 于 判断 用 户 提交 数据 的 方法 (GET/POST) 
HTTP_ACCEPT_LANGUAGE | 获取 客户 端 所 使 用 的 语言 





LOCAL_ADDR 


返回 接受 请 求 的 服务 器 的 IP 地 址 





PATH_INFO 





获取 虚拟 路 径 信息 
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环境 变量 名 


说 明 





PATH_TRANSLATED 


获取 当前 页 面 的 物理 路 径 





QUERY_ STRING 


查询 HTTP 请 求 中 问号 (?) 后 的 信息 








REMOTE_ADDR 


发 出 请 求 的 远程 主机 的 IP 地 址 





REMOTE_HOST 


发 出 请 求 的 主机 名 称 





REMOTE_USER 


用 户 发 送 的 未 映射 的 用 户 名 字符 串 。 该 名 称 是 用 户 实际 发 送 的 名 
称 , 与 服务 器 上 验证 过 滤器 修改 后 的 名 称 对 应 








REQUEST_METHOD 


获取 表单 提交 内 容 的 方法 ,如 GET .POST 等 





SCRIPT_NAME 


执行 脚本 的 虚拟 路 径 , 或 自 指定 的 URL 路 径 





SERVER_NAME 


获取 服务 器 主机 名 .DNS 别名 、IP 地 址 以 及 自 指定 的 URL 路 径 





SERVER_PORT 


发 出 请 求 的 端口 号 





SERVER_PROTOCOL 


请 求 信息 协议 的 名 称 和 修订 版 本 ,格式 为 protocol/revision 





SERVER_SOFTWARE 


服务 器 运行 的 软件 名 称 和 版 本 号 ,格式 为 name/version 





URL 


2. Request 对 象 的 方法 





系统 的 URL 路 径 


Request 对 象 的 常用 方法 如 表 6-6 所 示 。 


表 6-6 “Request 对 象 的 常用 方法 























方 ”法 说 明 

BinaryRead 执行 对 当前 输入 流 进行 指定 字 节 数 的 二 进 制 读 取 

MapPath 将 请 求 URL 中 的 虚拟 路 径 映射 到 服务 器 上 的 物理 路 径 

GetType 获取 当前 对 象 的 类 型 

SaveAs 将 HTTP 请 求 保存 到 磁盘 

ToString 将 当前 对 象 转换 成 字符 串 

一 般 来 说 ,使 用 BinaryRead 方法 取得 服务 器 所 传递 的 数据 就 不 能 使 用 Request 对 象 所 

提供 的 各 种 数据 集合 ,和 否则 会 发 生 错误 。 反 之 , 若 使 用 Request 对 象 的 数据 集合 取得 客户 端 


数据 ,也 不 能 使 用 BinaryRead 方法 。 因 此 ,BinaryRead 方法 并 不 常用 。 


6.1.3 Server 对 象 





Server 对 象 属 于 HttpServerUtility 类 ,该 类 包含 处 理 HTTP 请 求 的 方法 。 
通过 Server 对 象 可 以 访问 服务 器 上 的 方法 和 属性 ,如 获取 某 文件 的 物理 路 径 、 设 置 文 
件 的 执行 期 限 等 ; 也 可 以 创建 各 种 服务 器 组 件 实例 ,如 访问 数据 库 、 进 行文 件 的 输入 /输出 


1. Server 对 象 的 属性 





HttpServerUtility 类 是 Server 对 象 对 应 的 ASP. NET 类 。 它 的 属性 如 表 6-7 所 示 。 
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表 6-7 Server 对 象 的 属性 











属 性 说 明 
ScriptTimeout 获取 和 设置 脚本 文件 执行 的 最 长 时 间 ( 单 位 为 秒 ) 
MachineName 获取 服务 器 的 计算 机 名 称 


Server 对 象 的 ScriptTimeout 属性 用 来 表示 Web 服务 器 响应 一 个 网 页 请 求 所 需要 的 时 
间 。 如 果 脚 本 超过 该 时 间 限 度 还 没有 执行 结束 , 它 将 被 强行 中 止 ,并 提交 超时 错误 。 这 样 做 
主要 是 用 来 防止 某 些 可 能 进入 死 循环 的 错误 导致 服务 器 过 载 问题 。 

如 果 不 对 ScriptTimeonut 属性 进行 设置 , 则 默认 为 90 秒 。 如 果 将 其 设置 为 一 1, 则 永远 
不 会 超时 。 该 语句 要 放 在 所 有 ASP 执行 语句 之 前 ,否则 不 起 作用 。 

例如 : 
































Server. ScriptTimeout=100  // 指定 服务 器 处 理 脚 本 的 超时 期 限 为 100 秒 
limit = Server, ScriptTimeout // 将 设置 过 的 超时 期 限 存放 到 一 个 变量 中 
2. Server 对 象 的 方法 


Server 对 象 的 方法 及 含义 如 表 6-8 所 示 。 下 面 对 它 的 主要 方法 进行 介绍 。 
表 6-8 Server 对 象 的 方法 

































































方 法 说 明 

ClearError 清除 前 一 个 异常 

CreateObject 创建 COM 对 象 的 一 个 服务 器 实例 

Execute 停止 执行 当前 网 页 , 转 到 另 一 个 网 页 执行 ,执行 完 后 返回 原 网 页 

GetLastError 获得 前 一 个 异常 ,可 用 于 访问 错误 信息 

Transfer 停止 执行 当前 网 页 , 转 到 新 的 网 页 执行 ,执行 完 后 不 返回 原 网 页 

MapPath 将 指定 的 虚拟 路 径 映 射 为 物理 路 径 

HtmlEncode 对 字符 串 进 行 HTML 编码 ,并 将 结果 输出 

HtmlDecode 对 HTML 编码 的 字符 串 进行 解码 ,并 将 结果 输出 

UrlEncode 将 字符 串 按 URL 编码 规则 输出 

UrlDecode 对 在 URL 中 接收 的 HTML 编码 字符 串 进行 解码 ,并 将 结果 输出 
1) CreateObject 方法 
CreateObject 方法 用 于 在 ASP. NET 中 创建 一 个 服务 器 实例 。 


Server. Create0bject ("ADODB. Connection" ) // 创建 一 个 ADO 组 件 的 实例 


2) Execute 方法 和 Transfer 方法 

Execute 方 法 调用 一 个 指定 的 脚本 并 且 执 行 它 ,执行 完毕 后 再 返回 原文 件 ,就 像 被 调 
的 脚本 文件 存在 于 这 个 主 文件 中 一 样 ,类 似 于 许多 语言 中 的 类 或 子 程序 的 调用 。 

Execute 方法 的 语法 格式 如 下 : 
























































Server. Execute( string URL) 


182 。 Asp .NET Web 应 用 开发 技术 ( 第 2 版 ) 

其 中 ,参数 URL 为 指定 执行 的 脚本 文件 的 地 址 。 

Transfer 方 法 的 作用 是 将 一 个 正在 执行 的 脚本 文件 的 控制 权 转 移 给 另 一 个 文件 ,执行 
完毕 后 不 返回 原文 件 。 其 语法 格式 如 下 : 


Server. Transfer(string URL) 


注意 : Server 对 象 的 Transfer 方法 、Execute 方法 和 Response 对 象 的 Redirect 方法 既 
有 相似 之 处 ,也 有 区 别 。 它 们 都 是 终止 执行 当前 Web 页 面 , 转 而 执行 另 一 个 页 面 。 

。 使 用 Server. Transfer 和 Server. Execute 方法 只 能 转移 到 本 网 站 的 其 他 网 页 ,而 
Response. Redirect 方法 可 以 转移 到 任 一 网 站 的 任 一 网 页 。 
Execute 方法 相当 于 子 程序 的 调用 , 它 执行 完 被 调用 程序 后 会 返回 原 程序 , 而 
Transfer 方法 、Redirect 方法 都 不 再 返回 原 程 序 执行 。 

。 使 用 Transfer 方法 调用 另 一 个 文件 会 进行 控制 权 的 转移 ,同时 所 有 内 置 对 象 的 值 都 
一 起 “转移 ”, 并 保留 至 新 的 网 页 ,而 Redirect 方法 仅 转移 控制 权 。 

。 在 使 用 Transfer 和 Execute 方法 时 ,客户 端 tla 而 Redirect 
方法 在 重 定向 过 程 中 客户 端 与 服务 器 进行 两 次 来 回 的 通信 。 第 一 次 通信 是 对 原始 
页 面 的 请 求 ,得 到 一 个 目标 已 经 改变 的 应 答 ， 4 ea aera 
重 定向 后 的 页 面 。 

3) MapPath 方法 

MapPath 方法 将 指定 的 虚拟 路 径 映 射 到 服务 器 上 的 物理 路 径 。 其 引用 格式 如 下 : 


















































Server. MapPath( path) 


其 中 ,参数 path 是 Web 服务 器 上 的 虚拟 路 径 ,返回 值 是 与 path 对 应 的 物理 文件 路 径 。 
在 虚拟 路 径 中 以 字符 “7 或 ^\" 开 始 的 字符 串 是 一 个 完整 的 路 径 ,将 返回 一 个 相对 于 服务 器 
根 目录 的 地 址 。 如 果 只 有 字符 “/” 或 “\”, 将 返回 服务 器 的 根 目录 地 址 。 

例 6-3 Server 对 象 的 MapPath 方法 (06-03. aspx) 。 


protected void Page Load(object sender, EventArgs e) { 
Response. Write( "服务器 的 根 路 径 : "+ Server. MapPath("./")); 
Response. Write("< br > 当前 文件 所 在 的 物理 路 径 : " + Server.MapPath(".") ); 
Response.Write("<br>Default.aspx 文件 的 位 置 : " + 
Server. MapPath( "Default.aspx")); 
} 


上 述 代码 的 运行 结果 如 图 6-1 所 示 。 











BO @ htpilocalhost 4 P ~ OS severseinMaprat x 


人 E:\Microsoft Visual Studio\WebSites\Chapter06\ 
当前 文件 所 在 的 物理 路 径 ，EAMicrosoft Visual Studio\WebSites\Chapter06 
Default.aspx 文 件 的 位 置 ，E-\Microsoft Visual Studio\WebSites\Chapter06\Default aspx 




















图 6-1 Server 对 象 的 MapPath 方法 
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4) 对 HTML 进行 编码 和 解码 

HTML 是 用 标记 “<” 和 “>” 括 起 来 的 ,通常 这 些 标记 被 浏览 器 识别 为 系统 标记 ,不 会 显 
示 在 浏览 器 上 。 利 用 Server 对 象 的 HtmlEncode 和 HtmlDecode 方法 可 以 对 HTML 进行 
编码 和 解码 。 

HtmlEncode 方 法 对 要 在 浏览 器 中 显示 的 字符 串 进 行 编码 。 它 可 以 阻止 浏览 器 解释 
HTML 语法 ,从 而 直接 将 “<” 和 “>” 显 示 在 浏览 器 上 。 实 际 上 ,也 就 是 将 “<” 和 “>” 转 义 为 
“lt; ”和 *&gt; ”发 送 到 浏览 器 。 

HtmlEncode 方法 的 引用 格式 如 下 : 


Server. HtmlEncode (string s) 
Server. HtmlEncode (string s, TextWriter output) 























其 中 ,s 是 要 编码 的 字符 串 ,output 是 TextWriter 输出 流 , 包 含 已 编码 的 字符 串 
HtmlDecode 方法 用 于 对 已 经 进行 HTML 编码 的 字符 串 进 行 解 码 , 是 HtmlEncode 的 
反 操作 。 其 语法 定义 如 下 : 








Server. HtmlDecode (string s) 
Server. HtmlDecode (string s, TextWriter output) 


其 中 ,s 是 要 解码 的 字符 串 ,output 是 TextWriter 输出 流 , 包 含 已 解码 的 字符 串 。 
例 6-4 Server 对 象 的 HtmlEncode 和 HtmlDecode 方法 (06-04. aspx) 。 


protected void Page Load(object sender, EventArgs e) { 
string enStr = Server. HtmlEncode("<font size= 4> 输 出 HTML 标记 </font >"); 
Response. Write(enStr); 
Response. Write("<hr>"); 
string deStr = "&lt;font size = 5&gt; 输 出 HTML 标记 &lt;/font&gt;"; 
Response.Write("< br > 要 解码 的 字符 串 : " + deStr) ; 
Response. Write( "< br > 解码 后 : " + Server.HtmlDecode( deStr)); 


运行 结果 如 图 6-2 所 示 。 


国 同 EEC EEC 
<font size=4> 输 出 HTML 标 记 <font> 








要 解码 的 字符 率 : <font size=5> 输 出 HTML 标 记 </font> 
解码 后 :输出 HTML 标 记 





图 6-2 Server 对 象 的 HtmlEncode 和 HtmlDecode 方 法 


5) 对 URL 进行 编码 和 解码 
UrlEncode 方法 用 于 编码 字符 串 , 以 便 通过 URL 从 Web 服务 器 到 客户 端 进 行 可 靠 的 
HTTP 传输 。 其 引用 格式 如 下 : 
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Server. UrlEncode (string URL) 
Server. UrlEncode (string URL, TextWriter output) 


其 中 ,参数 url 为 要 转换 的 URL 地 址 的 字符 号 
编码 的 字符 串 。 
在 程序 中 有 些 字符 是 不 能 被 直接 读 取 的 ,例如 空格 以 及 特殊 ASCII 字符 等 。 
传递 时 ,通常 不 允许 出 现 这 些 字符 ,而 根据 URL 规则 对 字符 串 进 行 编码 后 可 





以 URL 形式 








以 传输 各 种 字符 。UrlEncode 方法 将 这 些 ASCII 字符 转换 成 URL 中 等 效 的 字符 。 
“十 ?代替 ,ASCII 码 大 于 126 的 字符 用 “%* 后 跟 十 六 进 制 代码 进行 准 换 。 


例 6-5 


Server 对 象 的 UrlEncode 方法 的 应 用 (06-05. aspx) 。 


protected void Page Load(object sender, EventArgs e) { 
String str = "http://mail.163. com" ; 
Response. Write("<p> 执 行 UrlEncode 方 法 前 : " + str ) ; 
String strNew = Server.UrlEncode(str); 
Response. Write ("<p> 执 行 UrlEncode 方 法 后 : " + strNew ); 


运行 结果 如 图 6-3 所 示 。 


A hp://mail 163.com 
执行 UrlEncode 方 法 后 ，htp%3a%628962fimail 163.com 





图 6-3 Server 对 象 的 UrlEncode 方 法 的 应 用 


四 ,output 是 TextWriter 输出 流 , 包 含 已 





当 字 符 串 














空格 用 


和 UrlEncode 方法 相反 ,UrlDecode 方法 用 于 对 字符 串 进行 解码 ,可 以 还 原 被 编码 的 字 











符 串 。 其 引 





有 格式 如 下 : 





Server. UrlDecode (string URL) 
Server. UrlDecode (string URL, TextWriter output) 


(6.2 状态 信息 的 保存 


当 用 户 访问 Web 站 点 时 ,数据 是 遵从 HTTP 协议 进行 传输 的 。HTTP 是 一 利 
协议 ,服务 器 对 来 自 客户 端的 每 个 请 求 都 视 为 新 请 求 。 也 就 是 说 ,用 户 向 Web 服务 器 发 出 




















的 每 个 请 求 都 与 它 前 面 的 请 求 无 关 , 服 务 器 无 法 知道 两 个 连续 的 请 求 是 否 来 自 同 


一 个 典型 的 实例 就 是 网 上 购物 。 当 用 户 选中 商品 放 入 购物 车 时 就 向 服务 器 发 出 一 次 


h 无 状态 











户 。 
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HTTP 请 求 ,如果 他 连续 放 入 购物 车 ,服务 器 就 必须 记 住 之 前 放 入 的 商品 ,直到 用 户 结账 或 
退出 。 当 用 户 付款 时 ,需要 提供 网 上 银行 的 账号 和 密码 。 此 后 ,商家 通过 物流 系统 进行 配 
送 。 用 户 在 收 到 商品 之 前 ,可 随时 查看 订单 所 处 的 状态 。 

在 这 样 一 个 复杂 的 流程 中 ,有 大 量 的 信息 需要 在 各 个 环节 进行 保存 、 更 新 或 查询 ,因此 
任何 一 个 Web 应 用 系统 都 要 解决 状态 信息 的 保存 和 共享 问题 。 

下 面 介 绍 与 Web 状态 信息 保存 有 关 的 Application 对 象 、Session 对 象 .Cookie 对 象 和 
ViewState 对 象 。 

6.2.1 Application 对 象 

Application 对 象 的 用 途 是 记录 整个 网 站 的 信息 。 也 就 是 说 ,Application 对 象 所 存储 的 
数据 可 以 被 所 有 访问 当前 Web 站 点 的 用 户 使 用 ,并 且 在 网 站 服务 器 运行 期 间 永 久保 存 。 

Application 对 象 是 HttpApplicationState 类 的 实例 , 它 存 放 的 是 供 ASP. NET 应 用 程 
序 使 用 的 变量 ,属于 此 应 用 程序 的 所 有 页 面 都 可 以 存储 并 修改 同一 个 Application 对 象 (如 
聊天 室 和 网 站 计数 器 )。Application 对 象 没 有 生命 周期 ,不 论 客户 端 浏览 器 是 否 关 闭 ， 
Application 对 象 仍然 存在 于 服务 器 上 。 

1. Application 对 象 的 键 值 

Application 对 象 通过 使 用 用 户 自 定义 的 数据 刍 值 来 存 取 信息 。 其 格式 如 下 : 



























































Application[" 键 名 "] = 值 
例如 以 下 代码 为 Application 对 象 添加 一 个 整数 。 
Application[ "MyVar"] = 2; 


用 户 可 以 通过 Application["MyVar" | 来 读 取 这 一 数据 。 一 旦 给 Application 对 象 分 配 
数据 , 它 就 会 持久 地 存在 ,并 始终 占用 内 存 , 直 到 关闭 Web 服务 器 使 得 Application 停止 。 
如 果 要 删除 Application 对 象 中 的 键 值 , 则 调用 Remove( ) 方 法 ,并 指定 键 名 。 例 如 : 


Application. Remove[ "MyVar" ]; 


2. Application 对 象 的 方法 


Application 对 象 的 主要 方法 如 表 6-9 所 示 。 
表 6-9 Application 对 象 的 主要 方法 























方 法 说 明 
Add() 向 Application 状态 添加 新 对 象 
Clear() 从 Application 状态 中 移 除 所 有 对 象 
Remove() 从 Application 集合 中 按照 键 名 移 除 项 
Lock() 锁定 Application 对 象 
UnLock() 解除 对 Application 对 象 的 锁定 
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ASP 


多 个 


解锁 。 


其 数 


OnEnd 事件 ,它们 的 代码 放 在 Global. asax 文件 中 。 
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使 用 Application 对 象 的 Add() 方 法 可 以 向 应 用 程序 状态 添加 新 的 项 。 例 如 ; 














Application. Add( "Title", article board) 或 Application("Title") = "Article Board" 





由 于 存储 在 Application 对 象 中 的 数据 可 以 并 发 访问 ,可 能 存在 同一 变量 在 同一 时 刻 被 
户 写 人 的 情况 。 因 此 在 存 取 Application 对 象 的 值 之 前 必须 先 锁定 它 ,并 在 使 用 完 后 
Application 对 象 提 供 了 两 种 方法 , 即 Lock 方法 和 Unlock 方法 ,它们 必须 配对 使 
Lock 方法 用 于 锁定 Application 对 象 ,以 确保 同一 时 刻 仅 有 一 个 用 户 可 以 修改 或 存 取 
据 键 值 。Unlock 方法 用 于 解除 锁定 ,允许 其 他 用 户 修改 和 存 取 数 据 键 值 。 

例 6-6 使 用 Application 对 象 统计 访问 网 站 的 总 人 次 (网 站 访问 计数 器 ,06-06. aspx) 。 
















































































protected void Page Load(object sender, EventArgs e) { 
证 ( Convert.ToInt32(Application[ "NumVisits"]) <1) { 


Application[ "NumVisits"] = 1; // 设置 计数 器 
} 
Application, Lock() ; // 加 锁 ,确保 同一 时 刻 仅 有 一 个 用 户 可 修改 变量 
Application[ "NumVisits"] = int.Parse(Application["NumVisits"].ToString()) + 1; 
Application, UnLock(); // 解除 锁定 ,允许 其 他 用 户 修改 计数 器 的 值 


Response. Write(" 本 网 站 访问 次 数 为 "+ Application[ "NumVisits"].ToString() + "次 !"); 
4 


程序 的 运行 结果 如 图 6-4 所 示 。 


本 网 站 的 访问 次 数 为 28 次 ! 





图 6-4 使 用 Application 对 象 统计 访问 网 站 的 总 人 次 


3. Application 对 象 的 事件 


Application 对 象 有 两 个 重要 的 事件 , 即 Application _OnStart 事件 和 Application _ 











Application_OnStart 事件 在 创建 与 服务 器 的 首次 会 话 ( 即 Session_OnStart 事件 ) 之 前 





发 生 。 当 服务 器 启动 并 允许 用 户 请 求 时 触发 Application_OnStart 事件 。 






































Application_OnEnd 事件 在 整个 ASP. NET 应 用 程序 退出 时 发 生 ,一 般 用 于 回收 占 





的 服务 器 资源 , 即 释 放 Application 变量 。 





表 6-10 列 出 了 Application 对 象 和 Session 对 象 的 所 有 事件 。 
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表 6-10 ”Application 对 象 和 Session 对 象 的 事件 


























事 件 说 明 
Application_Start 调用 当前 应 用 程序 目录 下 的 第 一 个 ASP. NET 页 面 时 触发 
Application End 应 用 程序 的 最 后 一 个 会 话 结束 时 触发 
Application_BeginRequest 每 次 页 面 请 求 开始 时 触发 (理想 情况 下 是 在 页 面 加 载 或 刷新 时 ) 
Application EndRequest 每 次 页 面 请 求 结束 时 ( 即 每 次 在 浏览 器 上 执行 页 面 时) 触发 
Session_Start 每 次 新 的 会 话 开 始 时 触发 
Session_End 会 话 结 束 时 触发 


4. Global.asax 文件 


每 个 应 用 程序 对 应 一 个 Global. asax 配置 文件 。Global. asax 文件 包含 了 所 有 应 用 程 
序 的 配置 设置 ,并 存储 了 所 有 的 事件 处 理 程序 。Global. asax 文件 存放 在 应 用 程序 的 根 目 录 
下 。Application 对 象 和 Session 对 象 的 所 有 事件 都 存放 在 Global. asax 文件 中 。 

默认 的 Global. asax 文件 内 容 如 下 : 


<%(@ Application Language = "C 并 ” 委 > 
< script runat = " server"> 
void Application Start(object sender, EventArgs e) { 
// 在 应 用 程序 启动 时 运行 的 代码 
void Application End(object sender, EventArgs e) { 
// 在 应 用 程序 关闭 时 运行 的 代码 
i 
void Application Error(object sender, EventArgs e) { 
// 在 出 现 未 处 理 的 错误 时 运行 的 代码 
void Session Start(object sender, EventArgs e) { 
// 在 新 会 话 启动 时 运行 的 代码 
) 
void Session End(object sender, EventArgs e) { 
// 在 会 话 结束 时 运行 的 代码 
// 注 意 : 只 有 在 Web. config 文件 中 的 Sessionstate 模式 设置 为 
// InProc 时 才 会 触发 Session End 事件 .如 果 会 话 模式 
// 设 置 为 StateServer 或 SQLServer, 则 不 会 触发 该 事件 
有 
</script > 


当 用 户 请 求 启动 应 用 程序 并 创建 新 的 会 话 时 ,首先 触发 Application_OnStart 事件 , 然 
后 才 是 Session_OnStart 事件 。 当 处 理 完 所 有 请 求 后 ,服务 器 首先 对 每 个 会 话 调用 Session_ 
OnEnd 事件 ,删除 所 有 的 活动 会 话 ,释放 占用 的 系统 资源 ,然后 调用 Application_OnEnd 事 
件 关闭 应 用 程序 。 

注意 : 在 事件 的 处 理 程序 代码 中 不 能 包含 任何 输出 语句 ,因为 Global. asax 文件 只 能 被 
调用 ,不 会 显示 在 页 面 上 。 
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5. Global.asax 文件 应 用 实例 一 一 网 站 访问 人 数 统 计 


在 网 站 的 首页 上 经 常会 看 到 网 站 统计 的 当前 在 线 人 数 , 实 现 这 样 的 功能 很 简单 ,需要 在 
Global. asax 中 为 应 用 程序 启动 事件 添加 有 关 的 代码 。 
例 6-7 ”使 用 Global. asax 文 件 统计 在 线 访问 人 数 (06-07. aspx) 。 




















<% @ Application Language = "C#" %> 
<script runat = "server"> 
// 当 应 用 程序 启动 时 设置 全 局 变量 VistorCount 为 0 
protected void Application Start(object sender, EventArgs e) { 
Application["VisitorCount"] = 0; 
lL 
protected void Application End(object sender, EventArgs e) { 
// 应 用 程序 关闭 时 运行 的 代码 
} 
// 当 会 话 开始 时 在 线 人 数值 加 1, 并 设 定 会 话 超时 时 限 为 两 分 钟 
protected void Session Start(object sender, EventArgs e) { 
Application, Lock( ); 
Application["VisitorCount"] = (int)Application[ "VisitorCount"] + 1; 
Application, UnLock( ); 
Session. Timeout = 2; 
} 
// 当 会 话 结束 时 在 线 人 数值 减 1 
protected void Session End(object sender, EventArgs e) { 
Application. Lock( ); 
Application["VisitorCount"] = (int)Application[ "VisitorCount"] — 1; 
Application. UnLock( ); 
由 
</script> 


在 本 例 中 使 用 全 局 可 访问 的 Application 对 象 存储 在 线 人 数 ,为 了 避免 在 同一 时 间 多 个 
用 户 访问 网 站 并 修改 计数 器 值 , 采 用 了 Application 对 象 的 加 锁 和 解锁 方法 。 

当 任何 一 个 用 户 登 录 网 站 时 ,在 Session_OnStart 事件 里 让 在 线 人 数 加 1, 当 用 户 离开 
时 ,在 Session_OnEnd 事件 里 让 在 线 人 数 减 1, 这 样 用 户 无 论 如 何 刷新 网 页 ,在 线 人 数 都 不 
会 改变 。 需 要 注意 的 是 , 当 用 户 关闭 浏览 器 时 ,Session_End 并 不 会 马上 发 生 , 而 是 等 待 一 
个 指定 的 时 间 ( 由 Session 对 象 的 TimeOut 属性 指定 ,默认 为 20 分 钟 ) 后 才 触 发 Session_ 
End 事件 。 当 一 个 会 话 超时 后 ,用 户 再 次 访问 网 站 则 会 开启 一 个 新 的 会 话 。 

在 页 面 上 只 要 有 以 下 代码 即 可 : 





protected void Page_ Load(object sender, EventArgs e) { 
string info=" 目前 在 线 人 数 为 : {0}"; 
info= string. Format(info, Application[ "VisitorCount"]); 
lblInfo. Text = info; 

} 


上 述 程序 的 运行 结果 如 图 6-5 所 示 。 
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OB /es pe 
目前 在 线 人 数 为 ，1 





图 6-5 Global. asax 文件 应 用 实例 


6.2.2 Session 对 象 


户 访问 网 站 被 视 为 用户 与 服务 器 进行 了 一 次 会 话 ”,Session 就 是 用 于 保存 会 话 信息 
的 对 象 。 同 一 Web 服务 器 可 能 同时 被 多 个 用 户 访问 ,每 个 用 户 都 与 服务 器 建立 一 个 “会 话 ” 
关系 。 也 就 是 说 ,从 用 户 到 达 某 个 特定 主页 开始 一 直到 关闭 浏览 器 的 这 段 时 间 ,每 个 用 户 都 
会 单独 获取 一 个 Session 对 象 。 

Session 对 象 属于 HttpSessionState 类 。Session 对 象 记载 了 特定 客户 的 信息 ,并 且 这 
些 信息 只 能 由 客户 自己 使 用 ,不 能 被 其 他 用 户 访问 。 

为 了 方便 管理 ,服务 器 给 每 个 用 户 分 配 一 个 唯一 的 标识 符 , 即 SessionID, 这 样 服务 器 就 
能 够 识别 来 自 同一 用 户 的 一 系列 请 求 了 。 如 图 6-6 所 示 , 当 用 户 第 一 次 请 求 一 个 Web 页 面 
时 ,服务 器 创建 一 个 Session( 记 录 了 Session 变量 name 王 William) ,同时 分 配给 该 用 户 一 个 
SessionID ,并 通过 Cookie 发 送 到 客户 端 。 当 该 用 户 想 要 请 求 另 一 个 页 面 时 ,必须 同时 加 载 
上 自己 的 SessionID。 服 务 器 收 到 请 求 后 就 搜索 与 那个 ID 相 匹 配 的 Session ,找到 请 求 的 
Session 变量 返回 给 用 户 ,这 样 Session 就 从 一 个 页 面 传递 到 下 一 个 页 面 ,服务 器 也 就 能 够 
识别 来 自 同 一 用 户 的 连续 请 求 了 。 
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图 6-6 Web 上 的 Session 管理 
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需要 说 明 的 是 ,Session 保存 在 服务 器 端 ,Cookies 保存 在 客户 端 ,Session 的 工作 机 制 
到 Cookies。 如 果 客 户 端 浏览 器 不 支持 Cookies 或 者 关闭 了 Cookies,Session 也 就 无 法 使 
下 面 对 Session 对 象 的 属性 ,方法 和 事件 等 进行 介绍 。 


1. Session 对 象 的 属性 
Session 对 象 的 主要 属性 如 表 6-11 所 示 。 
表 6-11 Session 对 象 的 主要 属性 

















由 






































属 性 说 明 
SessionID 获取 会 话 的 唯一 标识 符 (只 读 ,长 整 型 ) 
Timeout 获取 和 设置 会 话 时 间 的 超时 时 限 ,默认 值 为 20 分 钟 
Count 获取 会 话 状 态 集合 中 的 项 数 
Item 获取 或 设置 会 话 值 的 名 称 
ISNewSession 若 该 会 话 是 由 当前 请 求 创建 的 ,该 属性 将 返回 值 true 





当 用 户 第 一 次 访问 一 个 网 站 时 ,服务 器 就 给 该 用 户 建立 了 一 个 Session 对 象 ,并 分 配 一 
个 唯一 的 SessionID。Session 对 象 所 创建 的 变量 和 全 局 变量 一 样 ,在 该 用 户 访 问 的 每 个 
Web 页 面 程序 中 都 可 以 直接 读 取 。 

创建 一 个 Session 对 象 和 给 Session 变量 赋值 的 语法 是 一 样 的 。 第 一 次 给 Session 变量 
赋值 即 自动 创建 Session 对 象 ,以 后 再 赋值 就 是 修改 其 中 的 值 。 其 语法 如 下 : 


Session [" 键 名 "] = 值 
Session 对 象 有 自己 的 有 效 期 ,在 有 效 期 内 如 果 客 户 端 不 再 向 服务 器 发 出 新 请 求 或 刷新 
页 面 ,该 Session 就 会 自动 结束 并 释放 出 所 占用 资源 , 即 Session 变量 的 值 被 清空 。 通 过 


TimeOut 属性 可 以 设置 Session 对 象 的 超时 时 间 。 
例如 : 






Session. Timeout = 90 // 将 有 效 期 设置 为 90 分 钟 


2. Session 对 象 的 方法 
Session 对 象 的 主要 方法 如 表 6-12 所 示 。 
表 6-12 Session 对 象 的 主要 方法 


























方 ”法 说 明 

Abandon 清除 用 户 的 Session 对 象 ,释放 系统 资源 。 调 用 该 方法 后 会 触发 Session_OnEnd 事件 
Add 添加 一 个 新 项 到 会 话 状态 中 

Clear 清除 当前 会 话 状态 的 所 有 值 

CopyTo 将 当前 会 话 状态 值 的 集合 复制 到 一 个 一 维 数组 中 

Remove 删除 会 话 状态 集合 中 的 项 





RemoveAt 删除 会 话 状态 集合 中 指定 索引 处 的 项 











RemoveAll | 清除 会 话 状 态 集合 中 所 有 的 键 和 值 
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户 在 一 个 网 站 内 浏览 Web 页 面 的 整个 过 程 期 间 称 为 一 个 "Session 期 间 ”。 在 一 个 
Session 期 间 内 (未 超时 之 前 ) 如 果 使 用 了 Abandon 方法 ,可 以 清除 存储 在 Session 中 的 所 有 
对 象 和 变量 ,结束 该 会 话 并 释放 系统 资源 。 如 果 不 使 用 Abandon 方法 ,系统 将 一 直 等 到 
Session 超时 才 将 Session 中 的 对 象 和 变量 清除 。 

例 6-8 ”使 用 Session 对 象 统计 某 一 用 户 的 访问 次 数 (06-08. aspx) 。 
































protected void Page Load(object sender, EventArgs e) { 
Session[ "username"] = "jyu"; // 创建 Session 变量 username 
Session["visits"] = Convert.ToInt32(Session["visits"]) + 1; // 创建 Session 变量 visits 


string StrName = Session["username"].ToString(); 

Response. Write ("你 好 ! " + StrName) ; 

Response. Write ("<br > 欢迎 你 的 第 " + Session["visits"] + " 次 访问 "); 
} 


上 述 程 序 的 运行 结果 如 图 6-7 所 示 。 


你 好 1 
欢迎 优 光 第 5 次 访问 





图 6-7 使 用 Session 对 象 统计 某 一 用 户 的 访问 次 数 


3. Session 对 象 的 事件 


Session 对 象 有 两 个 事件 , 即 Session_OnStart 事件 和 Session_OnEnd 事件 。 

Session_OnStart 事件 在 用 户 与 服务 器 创建 一 个 新 的 会 话 时 触发 ,服务 器 在 执行 请 求 页 
面 之 前 先 处 理 该 脚本 。Session_OnEnd 事件 在 Session 结束 时 被 调用 。 当 程序 调用 了 
Session 对 象 的 Abandon 方法 或 发 生 超 时 情况 时 触发 Session_OnEnd 事件 。Session_ 
OnEnd 事件 一 般 用 于 清理 系统 对 象 或 变量 的 值 ,释放 系统 资源 。 

这 两 个 事件 的 代码 都 存储 在 Global. asax 文件 中 。 


6.2.3 Cookie 对 象 


























Session 对 象 能 够 保存 用 户 信 息 , 但 是 Session 对 象 并 不 能 够 持久 地 保存 用 户 信息 , 当 
户 在 限定 的 时 间 内 没有 任何 操作 时 ,用 户 的 Session 对 象 将 被 注销 和 清除 ,在 持久 化 保存 
用 户 信 息 时 Session 对 象 并 不 适用 。 

使 用 Cookie 对 象 能 够 持久 化 地 保存 用 户 信息 , 且 保 存在 客户 端 , 而 Session 和 
plication 对 象 保存 在 服务 器 端 ,所 以 Cookie 对 象 能 够 长 期 保存 。Web 应 用 程序 可 以 通 
过 获取 客户 端的 Cookie 来 识别 和 判断 一 个 用 户 的 身份 。 
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ASP. NET 提供 了 HttpCookie 对 象 来 处 理 Cookie, 该 对 象 是 System. Web 命名 空间 中 
的 HttpCookie 类 的 对 象 。 每 个 Cookie 都 是 HttpCookie 类 的 一 个 实例 。 


1. Cookie 对 象 的 属性 


Cookie 是 一 个 很 小 的 文本 文件 ,由 网 站 服务 器 在 用 户 第 一 次 访问 时 生成 ,发 送 到 客户 
端的 硬盘 上 ,用 来 存储 用 户 的 特定 信息 。 当 用 户 再 次 访问 该 站 点 时 ,浏览 器 就 会 在 本 地 硬盘 
上 查找 与 该 网 站 相关 联 的 Cookie。 如 果 存 在 ,就 将 它 与 页 面 请 求 一 起 发 送 到 网 站 服务 器 ， 
服务 器 上 的 Web 应 用 程序 就 可 以 读 取 Cookie 中 包含 的 信息 。 

一 般 来 说 ,每 个 客户 端 最 多 能 存储 300 个 Cookie ,一 个 站 点 最 多 能 为 一 个 单独 的 用 户 
设置 20 个 Cookie。Cookie 对 象 的 主要 属性 如 表 6-13 所 示 。 


表 6-13 Cookie 对 象 的 主要 属性 



























































属 性 说 明 
Domain 获取 或 设置 Cookie 应 属于 的 域名 
Expires 获取 或 设置 Cookie 的 过 期 时 间 
Name 获取 或 设置 Cookie 的 名 称 
Path 获取 或 设置 当前 Cookie 适用 的 路 径 
Secure 指定 是 否 通过 SSL( 即 仅 通过 HTTPS) 传 输 Cookie 
Value 获取 或 设置 Cookie 的 Value 
Values 获取 在 Cookie 对 象 中 包含 的 键 - 值 对 的 集合 





2. Cookie 的 方法 
Cookie 对 象 的 主要 方法 如 表 6-14 所 示 。 
表 6-14 Cookie 对 象 的 主要 方法 

















方 法 说 明 
Add 增加 Cookie 
Clear 清除 Cookie 集合 内 的 变量 
Get 通过 键 名 或 索引 得 到 Cookie 的 值 
Remove 通过 Cookie 的 键 名 或 索引 删除 Cookie 对 象 
3. 访问 Cookie 


ASP.NET 包含 两 个 内 部 Cookie 集合 , 即 Request 对 象 的 Cookies 集合 和 Response 对 
象 的 Cookies 集合 。 其 中 , Request 对 象 的 Cookies 集合 包含 由 客户 端 传输 到 服务 器 的 
Cookie, 它 们 以 Cookie 标 头 的 形式 传输 。Response 对 象 的 Cookies 集合 包含 一 些 新 的 
Cookie, 这 些 Cookie 在 服务 器 上 创建 并 以 Set-Cookie 标 头 的 形式 传输 到 客户 端 。 

浏览 器 负责 管理 用 户 本 地 硬盘 上 的 Cookie。 在 ASP.NET 页 面 中 可 以 通过 Response 
对 象 来 创建 和 设置 Cookie, 即 向 浏览 器 写 和 人 Cookie。 通 过 Request 对 象 可 以 读 取 Cookie。 

关于 Cookie 的 设置 和 读 取 方 法 ,读者 可 参见 6.1.1 节 和 6.1.2 节 的 有 关内 容 。 
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例 6-9 设置 和 读 取 Cookie 值 (06-09. aspx)。 


protected void Page Load(object sender, EventArgs e) { 
DateTime now = DateTime. Now; 
HttpCookie MyCookie = new HttpCookie("LastVistTime"); 
// 创建 了 一 个 Cookie 对 象 ,名 为 LastVistTime 


MyCookie. Value = now.ToString(); // 设置 Cookie 值 为 当前 时 间 
MyCookie. Expires = now.AddHours(2); // 设置 Cookie 超时 时 间 为 两 个 小 时 
Response. Cookies. Add(MyCookie); // 将 新 Cookie 添加 到 Cookies 集合 中 


// 从 Request 对 象 的 Cookies 集合 中 读 取 名 为 LastVistTime 的 Cookie 值 
string myVistTime = Request.Cookies["LastVistTime"].Value; 
Response. Write(" 上 次 访问 时 间 为 : " + myVistTime); 

) 


在 上 述 程 序 中 创建 Cookie 的 代码 可 以 简写 为 : 

HttpCookie MyCookie = new HttpCookie("LastVistTime", now.ToString()); 
或 

Reponse. Cookies[ "LastVistTime"] = now.ToString(); 

程序 的 运行 结果 如 图 6-8 所 示 。 


| @ hep//ocalhost 1045, Ld cl 


上 次 访问 时 间 为 ，2014/821 10:31:20 





图 6-8 设置 和 读 取 Cookie 值 


由 于 Cookie 存储 在 客户 端 ,所 以 不 能 在 服务 器 端 编程 直接 修改 Cookie。 如 果 确 实 需要 
修改 ,创建 一 个 同名 的 Cookie, 然 后 发 送 到 客户 端 覆盖 原 Cookie。 

当 删 除 Cookie 时 可 以 利用 Cookie 的 Expires 属性 ,创建 一 个 与 原 Cookie 同名 的 
Cookie ,设置 Expires 属性 为 过 去 的 某 一 天 ,将 其 发 送 到 客户 端 覆 盖 诛 Cookie ,这样 当 浏 览 
器 检查 Cookie 的 失效 日 期 时 就 会 删除 这 个 过 期 的 Cookie。 














6.2.4 ViewState 对 象 


针对 同一 页 面 的 多 次 请 求 可 以 使 用 ViewState 对 象 保存 服务 器 控件 的 状态 信息 。 简 单 
来 说 ,ViewState 就 是 用 于 维护 页 面 的 UI 状 态 的 。 

与 Session 对 象 相 比 ,Session 对 象 保存 在 服务 器 内 存 中 ,大 量 使 用 Session 会 使 服务 器 
的 负担 加 重 , 而 ViewState 对 象 将 数据 存 到 页 面 的 隐藏 控件 里 ,不 占用 服务 器 资源 。 
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Session 的 默认 超时 时 间 是 20 分 钟 ,而 ViewState 永远 不 会 超时 。ViewState 只 能 在 同一 个 
页 面 的 多 次 回 发 间 保 存 状态 信息 , 它 不 能 解决 在 多 个 页 面 间 共享 状态 信息 的 问题 ,而 后 者 可 
通过 Session 对 象 解决 。 
和 隐藏 控件 相似 ,ViewState 在 同一 个 页 面 的 多 次 请 求 间 进行 值 传递 。 这 是 因为 一 个 
事件 发 生 之 后 页 面 可 能 会 刷新 ,如 果 定 义 全 局 变量 会 被 清 零 ,而 使 用 ViewState 对 象 可 以 保 
存 数据 。 因 此 ,所 有 的 Web 服务 器 控件 都 使 用 ViewState 在 页 面 回 发 期 间 保存 状态 信息 。 
如 果 某 控件 不 需要 在 回 发 期 间 保存 状态 ,最 好 关闭 它 的 ViewState, 避免 不 必要 的 资源 浪 
费 。 通 过 给 @ Page 指令 添加 “EnableViewState = false” 属 性 可 以 禁止 整个 页 面 的 
ViewsState。 


ViewState 对 象 保存 数据 采用 “ 键 (Key) - 值 (Value)” 对 的 形式 ,格式 如 下 : 
























































ViewState[" 键 名 "] = 数据 值 ; 


用 户 可 以 用 ViewState[" 键 名 "] 取 出 保存 在 ViewState 对 象 中 的 数据 。 注 意 ,这 时 取出 
的 数据 类 型 为 Object ,必要 时 往往 要 转换 成 特定 的 数据 类 型 。 
例如 ,使 用 ViewState 对 象 保 存 信 息 的 代码 如 下 : 








ViewState[ "SortOrder"] = "DESC"; // 保存 在 ViewState 对 象 中 
string sortOrder = (string)ViewState["SortOrder"]; // 从 ViewState 中 读 取 


例 6-10 用 ViewState 记录 同一 个 页 面 中 按钮 被 单 击 的 次 数 (06-10. aspx) 。 


protected void btnClick Click(object sender, EventArgs e) { 


int counter; // 计数 器 
if (ViewState["Counter"] == null) { 
counter = 1; // 如 果 是 第 一 次 单 击 按钮 
} 
else { 


// 从 ViewState 对 象 中 取出 上 次 保存 的 counter 变量 值 并 累加 1 

counter = (int)ViewState["Counter"] + 1; 
} 
ViewState[ "Counter"] = counter; // 将 counter 变量 值 保存 到 ViewState 对 象 中 
lblInfo. Text = "您 单 击 了 ”+ counter.ToString() + "次 按钮 ."; 








在 上 述 代码 中 使 用 counter 变量 作为 按钮 单 击 次 数 的 计数 器 ,并 将 counter 变量 值 保存 
到 ViewStateL"Counter"] 中 。 在 同一 个 页 面 中 多 次 单 击 按钮 ,运行 结果 如 图 6-9 所 示 。 


























图 6-9 用 ViewState 记录 同一 个 页 面 中 按钮 被 单 击 的 次 数 
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(6.3 习题 与 上 机 练习 
/2 























1. 填空 题 
(1) Response 对 象 的 方法 可 以 使 浏览 器 显示 另外 一 个 URL。 
(2) Server 对 象 的 方法 可 以 将 虚拟 路 径 转化 为 物理 路 径 。 
(3) 设置 Cookie 采用 对 象 , 读 取 Cookie 采用 对 象 。 
(4) Server 对 象 的 ScriptTimeonut 属性 的 默认 值 是 , Session 对 象 的 Timeout 
属性 的 默认 值 是 _。 
(5) Request 对 象 的 集合 可 以 用 来 获取 服务 器 的 名 称 。 
(6) 可 发 间 保 存 状 态 信息 ,要 想 在 同一 网 站 的 多 个 
页 面 间 共 
2. 选择 题 
(1) Request. Form("username") 中 的 username 是 ( 和 
A. 表单 的 名 称 B. 网 页 的 名 称 
C. 表单 元 素 的 名 称 D. 表单 按钮 的 名 称 
(2) 不 需要 在 网 页 第 一 行 添加 <% Response. Buffer 二 true %> 的 是 ( )。 
A. Response. Redirect B. Response. Clear 
C. Response. End D. Response. Flush 


(3) 有 URL*http://127.0.0.1/test. aspx? _ user 一 aa”, 如 果 想 接收 user 中 的 内 容 , 以 
下 选项 正确 的 是 ( 人 
A. Request. Form("user") B. Request. Querystring("user") 
C. Request. Cookies("user") D. Request. ServerVariables("user") 
(4) 如 果 要 获取 服务 器 的 IP 地 址 ,应 使 用 下 面 语句 ( )。 
A. Request. ServerVariables("LOCAL_ADDR") 
B. Request. ServerVariables("REMOTE_ADDR") 
C. Request. ServerVariables("REMOTE_HOST") 
D. Request. ServerVariables("URL") 
(5) 如 果 想 在 URL 里 带 有 汉字 参数 ,下 面 正确 的 是 ( ) 。 
A. <a href 王 test. asp? hz 二 <% 二 Server. HtmlEncode(" 你 好 ")%>> 问 候 </a > 
B. <a href 一 test. asp? hz 二 <% 二 Server. UrlEncode(" 你 好 ")%>> 问 候 </a> 
C. <a href 王 test.asp? hz 二 <% 二 Server. MapPath(" 你 好 ")%>> 问 候 </a> 
D. 以 上 都 不 对 
(6) 如 果 要 在 网 页 中 输出 “< a href='http://Uwww. 163. com'> 网 易 </a>”, 下 列 正确 的 
是 ( ) 。 
A. Response. Write("< a href 王 'http://www. 163. com'> 网 易 </a>"”) 
B. Response. Write(Server. UrlEncode("< a href 王 'http://www. 163. com'> 网 易 
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</a>")) 
C. Response. Write(Server. HtmlEncode("<a href 一 'http://www. 163. com'> 网 
易 </a >")) 
D. 以 上 都 不 对 


(1) Application 对 象 和 Session 对 象 的 区 别 是 什么 ? 

(2) Session 对 象 和 ViewState 对 象 的 区 别 是 什么 ? 

(3) 简 述 Session 和 Cookie 的 区 别 。 

(4) 分 别 用 HTML JavaScript\C#、ASP. NET 语句 输出 “ 视 你 好 运 ” 这 人 句 话 。 

















4. 上 机 练习 


(1) 设计 一 个 用 户 登 录 页 面 ,要 求 输 入 账号 和 密码 ,并 单 击 “ 登 录 ” 按 钮 。 如 果 输 入 的 账 
号 为 "abc”\ 密 码 是 "123word”, 则 跳 转 到 另 一 个 网 页 并 显示 "欢迎 访问 ”, 和 否则 在 当前 页 面 输 
出 “账号 或 密码 不 正确 ”。 

(2) 将 上 题 稍 加 修改 ,在 输入 正确 的 账号 和 密码 后 输出 “你 是 第 次 访问 本 站 ”中间 的 
7 在 刷新 网 页 时 也 要 同时 刷新 。 
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目前 的 Web 应 用 基本 上 都 离 不 开 数 据 库 的 支持 。. NET 框架 中 提供 了 多 种 方式 来 访问 
数据 库 ,ADO. NET 是 最 直接 、 最 灵活 也 是 执行 效率 最 高 的 方式 , 除 此 之 外 还 可 以 使 用 某 种 
对 象 关系 映射 (Object-Relational Mapper,ORM) 技 术 , 以 提供 更 大 的 灵活 性 和 更 高 的 开发 
效率 。 本 章 以 ADO. NET 和 Entity Framework 为 核心 讲解 . NET 数据 访问 技术 。 


C2 ADO.NET 体系 结构 


ADO. NET 是 一 组 封装 好 的 对 象 , 它 提供 了 对 关系 型 数据 库 、XML 数据 ,Office 文档 数 
据 等 多 种 数据 存储 的 访问 方式 。 


ADO. NET 采用 多 层 体系 结构 ,其 核心 组 件 结构 如 图 7-1 所 示 。 





Connection DataAdapter 
Transaction SelectCommand DataTable 
DataRowCollection 
Command 
UpdateCommand DataColumnCollection 





DeleteCommand ConstraintCollection 





Database 
图 7-1 ADO. NET 核心 组 件 结构 


ADO. NET 用 于 访问 和 操作 数据 的 两 个 主要 组 件 , 分 别 是 Data Provider (数据 提供 程 
序 ) 和 DataSet( 数 据 集 )。 前 者 用 于 连接 数据 库 ,实现 数据 检索 和 更 新 操作 ; 后 者 则 代表 数 
据 存储 的 内 存 映 像 ,将 关系 型 数据 及 XML 数据 加 载 到 内 存 中 ,然后 断 开 与 数据 源 的 连接 进 
行 离线 处 理 , 最 后 再 一 次 性 将 更 新 后 的 数据 保存 到 数据 源 中 。 


7.1.1 ADO.NET 数据 提供 程序 
数据 提供 程序 是 应 用 程序 与 数据 源 之 间 的 一 座 桥梁 ,包含 一 组 用 于 访问 数据 库 、 执 行 
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SQL 语句 的 核心 对 象 ,如 表 7-1 所 示 。 
表 7-1 ADO. NET 的 核心 对 象 
对 象 名 称 功 能 
Connection 对 象 ”| 建立 与 指定 数据 源 的 连接 
Command 对 象 对 数据 源 执行 SQL 命令 及 存储 过 程 
DataReader 对 象 ”| 从 数据 源 中 读 取 只 进 且 只 读 的 数据 流 


DataAdunter 对 象 | 作为 数据 源 与 DataSet 之 癌 的 桥梁 ,可 以 从 数据 源 获取 数据 填充 到 DataSet 中 ,也 
Ee 可 以 依照 DataSet 中 的 修改 更 新 数据 源 




















ADO. NET 为 不 同 的 数据 源 设计 了 不 同 的 数据 提供 程序 ,主要 包括 以 下 4 种 。 
。 SQL Server 提供 程序 : 提供 对 SQL Server 数据 库 的 优化 访问 。 
。 Oracle 提供 程序 : 提供 对 Oracle 数据 库 的 优化 访问 。 
。 OLE DB 提供 程序 : 提供 对 OLE DB 了 驱动 的 任意 数据 库 的 访问 ,以 往 的 多 数 数据 库 
: 品 都 支持 OLE DB 数据 访问 。 
。 ODBC 提供 程序 : 提供 对 ODBC 驱动 的 任意 数据 库 的 访问 。 
图 7-2 显示 了 ADO. NET 数据 提供 程序 的 模型 结构 。 在 选择 数据 提供 程序 时 应 尽量 
选择 为 数据 源 定制 的 .NET 提供 程序 , 若 找 不 到 合适 的 定制 程序 ,再 选择 基于 OLE DB 的 提 
供 程 序 。 在 极 少数 情况 下 , 若 依然 找 不 到 合适 的 OLE DB 提供 程序 ,最 后 可 以 选择 ODBC 
提供 程序 。 











| 


SQL Server OLE DB ODBC Oracle | 








:NET 提 供 程序 -NET 提供 程 序 .NET 提 供 程序 -NET 提供 程序 


| | 


OLE DB 驱动 程序 | | ODBC 驱 动 程序 


Re > 
[a Server yat wie Oracle 
数据 库 OLE DB 数据 源 ODBC 数 据 源 数据 库 


图 7-2 ADO. NET 数据 提供 程序 模型 结构 






































7.1.2 ADO. NET 数据 集 


数据 集 DataSet 是 数据 驻 留 在 内 存 中 的 表示 形式 。 不管 数 据 源 是 什么 , 它 都 可 以 提供 
一 致 的 关系 编程 模型 。DataSet 表示 包括 相关 表 、 表 间 关 系 及 约束 在 内 的 整个 数据 集 ,其 对 
象 结构 如 图 7-3 所 示 。 

DataSet 中 的 核心 对 象 如 下 。 
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DataSet 








DataRelationCollection 





ExtendedProperties 














DataTableCollection 


DataTable 


|DataRowCollection 
HDataView 
ew DataRow 


上 




















ChildRelations 





ParentRelations 





Constraints 


DataColumnCollection 


[LExtendedProperties DataColumn 


J PrimaryKe, 
Lensy ExtendedProperties 


图 7-3 DataSet 对 象 结构 


























(1) DataTableCollection: 数据 表 的 集合 。 在 DataSet 中 可 以 包含 0 个 到 多 个 数据 表 ， 
DataTableCollection 包含 了 DataSet 中 所 有 的 DataTable 对 象 。 

(2) DataRelationCollection: 关联 的 集合 。 在 关系 数据 库 中 表 和 表 之 间 存 在 一 定 的 关 
联 ( 例 如 外 键 ), DataSet 作为 数据 库 的 内 存 映 像 , 也 可 以 在 内 存 表 之 间 建 立 关 联 。 
DataRelationCollection 包含 了 DataSet 中 所 有 的 DataRelation 对 象 。 

(3 ) DataTable: 数据 表 , 表示 内 存 驻 留 数 据 的 单个 表 。DataTable 包含 由 
DataColumnCollection 表示 的 列 集合 以 及 由 Constraints 表示 的 约束 集合 ,这 两 个 集合 共同 
定义 了 数据 表 的 架构 。 在 DataTable 中 还 包含 由 DataRowCollection 表示 的 行 的 集合 , 即 表 
的 数据 。 

(4) DataView: 数据 视图 ,代表 存储 在 DataTable 中 数据 的 不 同 表现 形式 。 通 过 
DataView, 用 户 可 以 为 表 中 的 数据 进行 排序 ,或 者 定制 筛选 器 以 过 滤 数 据 。 

(5) DataRow: 数据 行 ,代表 数据 表 中 的 一 行 数据 ,可 以 对 行 中 的 各 个 数据 项 按 顺 序号 
或 列 名 称 进行 访问 。 

(6) DataColumn: 数据 列 ,代表 数据 表 中 的 一 个 属性 ,通过 它 来 定义 数据 表 的 结构 。 

(7) PrimaryKey: 主键 ,对 于 内 存 表 ,也 可 以 将 它 的 一 个 或 者 多 个 数据 列 定义 为 主键 ， 
以 实现 完整 性 约束 。 


C 2 使 用 基于 连接 的 对 象 访问 数据 库 
在 .NET Data Provider 中 提供 了 Connection 对 象 .Command 对 象 和 DataReader 对 


象 ,可 以 连接 到 数据 库 , 向 数据 库 发 送 SQL 命令 ,以 及 接收 命令 的 执行 结果 ,这 些 对 象 称 为 
基于 连接 的 对 象 。 
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7.2.1 访问 数据 库 的 一 般 方 法 


使 用 . NET 数据 提供 程序 访问 数据 库 的 一 般 步骤 如 下 : 

(1) 使 用 Connection 对 象 建立 到 数据 库 的 连接 。 

(2) 在 连接 之 上 建立 Command 对 象 ,通过 它 向 数据 库 发 送 SQL 命令 。 

(3) 接收 SQL 命令 的 返回 结果 。 若 返回 结果 集 有 两 种 处 理 方法 ,一 是 采用 DataReader 
对 象 每 次 获取 一 条 记录 数据 ,二 是 采用 DataTable 对 象 一 次 性 获取 所 有 数据 。 
(4) 释放 数据 库 操作 对 象 ,并 关闭 数据 库 连 接 。 
于 ADO. NET 针对 不 同 的 数据 源 有 不 同 的 数据 提供 程序 ,因此 用 户 要 根据 实际 的 应 
环境 选择 合适 的 对 象 来 使 用 。 下 面 以 查询 SQL Server 数据 库 为 例 说 明基 本 使 用 方法 。 
例 7-1 连接 pubs 数据 库 , 查 询 authors 表 中 的 所 有 记录 并 列表 显示 。 
pubs 数据 库 是 SQL Server 早期 版 本 提供 的 一 套 示例 数据 库 , 本 书 中 的 所 有 示例 都 使 
SQL Server 的 一 个 简化 版 本 一 一 LocalDB ,该 系统 随 Visual Studio 一 起 安装 ,并 按 需 启 
动 服务 ,使 用 非常 方便 。 

在 Visual Studio 中 打开 SQL 脚本 文件 instpubs. sql, 单 击 页 面 左 上 和 角 的 “执行 ?按钮 ， 
此 时 会 弹出 “连接 到 服务 器 ”对 话 框 ,如 图 7-4 所 示 。 选 择 (localdb)\MSSQLLocalDB 数据 
库 实例 ,并 选择 Windows 身份 验证 ”方式 , 单 击 “ 连 接 ” 按 钮 ,系统 会 在 所 选 的 LocalDB 数据 
库 实例 上 运行 instpubs. sql 脚本 ,建立 pubs 数据 库 并 插入 初始 数据 。 用 户 可 以 在 "SQL 
Server 对 象 资源 管理 器 ”或 “服务 器 资源 管理 器 ”中 查看 该 数据 库 及 表 中 的 数据 ,如 图 7-5 
所 示 。 
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图 7-4 连接 到 LocalDB 数据 库 实例 图 7-5 查看 pubs 数据 库 
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建 一 个 空 的 Web 应 用 程序 项 目 , 取 名 为 chap07。 添 加 Web Form 页 面 exam7_1. aspx， 
并 在 工具 箱 的 数据 选项 卡 上 选择 GridView 控件 添加 到 页 面 上 ,最 后 生成 的 页 面 代码 如 下 : 
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< 外 @ Page Language = "C#" AutogventWireup= "true" CodeBehind = "exam7 1.aspx.cs" 
Inherits = "chap07. exam7 1" %> 


<html> 


<head runat = "server"> <title> ADO. NET 示例 </title ></head> 


<body> 


<form id= "forml" runat = "server"> 
<asp:GridView ID = "GridViewl" runat = "server"></asp:GridView> 
</form> 


</body > 
</html > 


在 Web 


页 的 设计 视图 中 用 鼠标 双击 页 面 的 空白 区 域 ,进入 代码 窗口 ,编写 以 下 代码 : 


using System; 
using System.Data. SqlClient; 


namespace chap07 { 
public partial class exam7 1 : System. Web. UI.Page { 
protected void Page Load(object sender, EventArgs e) { 


b 
} 


string connstr = (@"Data Source = (localdb)\MSSQLLocalDB; Initial Catalog = pubs; 
Integrated Security = true"; 
SqlConnection conn = new SqlConnection(connstr); 
SqlCommand cmd = new SqlCommand( ) ; 
cmd. Connection = conn; 
cmd. CommandText = "select * from authors"; 
try { 
conn. Open( ); 
SqlDataReader dr = cmd.FxecuteReader(); 


GridView1. DataSource = dr; // 定义 GridView 控件 的 数据 源 
GridView1. DataBind( ); // 实现 数据 绑 定 
dr.Close() 

} catch{ } 

finally { conn. Close(); } 


保存 项 目 , 在 解决 方案 资源 管理 器 窗口 中 右 击 exam7_1. aspx 页 面 ,选择 “在 浏览 器 中 
查看 ”命令 访问 该 页 面 ,运行 结果 如 图 7-6 所 示 。 


本 例 中 
(1) 操 


的 核心 问题 说 明 如 下 : 
作 SQL Server 数据 库 通 常 使 用 SQL Server . NET 提供 程序 ,这 涉及 


SqlConnection、SglCommand 和 SqlDataReader 等 对 象 .首先 要 导入 SqlClient 命名 空间 。 
(2) 在 创建 SqlConnection 连接 对 象 时 需要 通过 “连接 字符 串 ” 来 指明 数据 库 的 位 置 、. 登 



































录 验 证 信息 等 。 

(3) 调用 SqlConnection 对 象 的 Open 方法 可 以 打开 连接 ,对 数据 库 操作 完毕 后 再 调用 
Close 方法 关闭 连接 。 

(4) 使 用 SqlCommand 对 象 向 数据 库 发 送 一 条 select 语句 ,执行 后 将 返回 一 个 结果 集 。 


























该 结果 集 通 


常 为 SqlDataReader 对 象 。 
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图 7-6 查询 并 显示 authors 表 中 的 所 有 记录 


(5) 使 用 GridView 数据 绑 定 控件 显示 查询 结果 。 
7.2.2 使 用 Connection 对 象 


ADO. NET 使 用 Connection 对 象 建立 到 数据 源 的 连接 后 可 以 对 数据 源 进 行 各 种 操作 ， 
操作 完成 后 切记 要 释放 连接 ,为 了 提高 建立 连接 的 效率 ,可 以 使 用 连接 池 来 缓存 和 共享 











ADO. NET 针对 不 同 的 数据 提供 程序 要 建立 不 同 的 连接 对 象 , 常 用 的 有 4 种 ,如 表 7-2 
所 示 。 
表 7-2 ADO.NET 的 4 种 Connection 对 象 
对 象 名 称 描 述 
SqlConnection 对 象 用 于 连接 SQL Server 数据 库 





OracleConnection 对 象 


用 于 连接 Oracle 数据 库 





OleDbConnection 对 象 


该 对 象 通过 OLE DB 可 以 连接 多 种 数据 源 ,例如 Access、SQL Server 甚至 Excel 





OdbcConnection 对 象 


1. 连接 字符 串 








该 对 象 使 用 连接 字符 串 或 ODBC 数据 源 名 称 (DSN) 连 接 数据 源 








在 创建 连接 对 象 时 需要 提供 一 个 连接 字符 串 , 它 包括 数据 库 服务 器 名 、 用 户 名 、 密 码 以 


及 数据 库 名 等 信息 。 
个 选项 : 











针对 不 同 的 数据 库 连 接 对 象 ,连接 字符 串 会 有 所 区 别 ,但 都 包含 以 下 几 





1) 数据 库 实 例 名 称 Data Source 
一 台 服 务 器 上 可 能 运行 着 多 个 数据 库 实例 。 在 SQL Server 对 象 资源 管理 器 中 可 以 管理 
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SQL Server 实例 。 如 图 7-7 所 示 ,可 以 看 出 本 机 安装 了 两 个 版 本 的 LocalDB 服务 ,实例 名 分 别 
为 (localdb)\MSSQLLocalDB 和 (localdb)N\v11.0。 i 


通常 使 用 DataSource 键 指定 要 连接 的 数据 库 | 凶 J 外 
实例 。 4 请 SQL Server 


2) 数据 库 名 称 Initial Catalog > Jocldbywito SQL 

在 一 个 数据 库 实例 上 可 以 建立 多 个 数据 库 , 通 。 图 7-7 管理 本 机 的 SQL Server 实例 
常 使 用 Initial Catalog 或 DataBase 键 指定 要 连接 
的 具体 数据 库 。 

3) 身份 验证 方式 

身份 验证 方式 包括 两 种 , 即 Windows 集成 身份 验证 方式 、 混 合身 份 验证 方式 。 

当 应 用 程序 和 数据 库 服 务 器 位 于 同一 台 计 算 机 上 时 应 尽量 选择 集成 验证 方式 以 便 建 立 
可 信和 连接 (Trusted Connection) ,否则 需要 在 数据 库 服务 器 中 建立 一 个 数据 库 用 户 ,提供 用 
户 名 和 口令 以 供 验 证 。 这 里 仍 以 pubs 数据 库 为 例 使 用 SqlClient 连接 到 本 机 的 服务 。 

若 采 用 Windows 集成 身份 验证 方式 ,其 连接 字符 串 如 下 : 








~ 己基 























Server 11.0.2100 - HIM51N 









































Data Source = (localdb)\MSSQLLocalDB; // 数据 库 实 例 名 
Initial Catalog = pubs; // 数据 库 名 称 
Integrated Security = true // 建立 可 信 连 接 


若 使 用 SQL Server 混合 验证 ,假设 用 户 名 和 口令 都 是 examdbuser, 则 连接 字符 串 
如 下 : 


Data Source = (localdb)\MSSQLLocalDB; 

Initial Catalog = pubs; 

User ID = examdbuser; // 登录 名 
Password = examdbuser // 登录 密码 


2. 与 不 同 的 数据 库 建立 连接 
连接 到 不 同 的 数据 库 需 要 使 用 不 同 的 连接 对 象 及 连接 字符 串 。 
(1) 使 用 SqlClient 连接 SQL Server 数据 库 : 


using System. Data; 
using System. Data. SqlClient; // 导入 SqlClient 命名 空间 


string constr = "Data Source= (local); Initial Catalog = pubs; Integrated Security= true" 
SqlConnection conn = new SqlConnection( constr ); ”// 建立 连接 对 象 











其 中 “(local) "为 SQL Server 常规 版 本 中 的 默认 数据 库 实例 名 。 
(2) 使 用 SqlClient 连接 Web 应 用 数据 目录 下 的 SQL Server 数据 库 文件 : 























using System. Data; 
using System. Data. SqlClient; // 导入 SqlClient 命名 空间 


‘0s) 
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fr 


接 ” 


string constr = "Data Source = (local); AttachDbFilename = |DataDirectory|\pubs. mdf; 


Integrated Security= true" 
SqlConnection conn = new SqlConnection( constr ); 


其 中 ,|DataDirectory|” 代 表 Web 应 用 根 目录 下 的 App_Data 文件 夹 。 


(3) 使 用 OracleClient 连接 Oracle 数据 库 : 


using System. Data; 


using System. Data. OracleClient; 


// 导入 OracleClient 命名 空间 


string constr = (@" Data Source = orcl;User ID = scott;Password = tiger" 


OracleConnection conn = new OracleConnection(constr); 





(4) 使 用 OLE DB 连接 Access 数据 库 : 














using System. Data; 
using System. Data. OleDb; 


OleDbConnection conn = new OleDbConnection(); 


// 导入 01leDb 命名 空间 


conn. ConnectionString = "Provider = Microsoft.Jet.OLEDB. 4.0; Data Source =D:\pubs. mdb" 


(5) 使 用 OLE DB 连接 SQL Server Express 版 数据 库 : 


using System. Data; 
using System. Data. OleDb; 


// 导入 OleDb 命名 空间 


string constr = "Provider = SQLOLEDB; Data Source = .\sqlexpress; Integrated Security = SSPI; 
Initial Catalog = pubs" 
OleDbConnection conn = new OleDbConnection(constr); 


其 中 ,“. \sqlexpress” 为 SQL Server Express 版 数据 库 的 默认 实例 名 称 。 
(6) 使 用 OLE DB 连接 Oracle 数据 库 : 


using System. Data; 

using System. Data. OleDb; 
string constr = (@"Provider= MSDAORA;Data Source = orcl;User ID = scott;Password = tiger" 
OleDbConnection conn = new OleDbConnection(constr); 


需要 指出 的 是 “连接 字符 


B。 在 菜单 中 选择 “视图 
据 连 接 ” 结 点 ,可 
,在 弹出 的 对 


// 导入 0leDb 命名 空间 





”是 建立 数据 库 连 接 的 关键 ,可 借助 工具 自动 生成 连接 字符 











右 下 


i, 选择 “属性 








E” 菜 单 可 以 打开 


3. 打开 和 关闭 连接 


连接 对 象 包 


到 








属性 窗口 ,复制 

















-服务 器 资源 管理 器 ” ,在 打开 的 服务 器 资源 管理 器 窗口 中 点 开 “ 数 
1 以 看 到 前 面 已 经 使 用 过 的 数据 库 连接 列表 ; 右 击 “ 数 据 连 接 ”, 选择 “添加 连 
话 框 中 选择 合理 的 参数 并 单 击 “确定 ”按钮 可 以 建立 新 的 连接 ; 在 某 连 接 上 











中 的 “连接 字符 串 属性 ” 即 可 。 





2 后 需要 打开 连接 才能 真正 地 连接 到 数据 库 。 调 用 连接 对 象 的 Open 方法 


第 7 章 ”数据 访问 技术 om) 








即 可 打开 连接 ,用 法 如 下 : 











conn.Open( ); 


在 Web 环境 中 , 当 一 个 线程 使 用 完 连 接 后 应 尽快 释放 连接 ; 若 连接 打开 后 没有 及 时 关 
闭 , 将 长 时 间 保 持 占 用 状态 ,其 他 线程 将 无 法 使 用 。 
调用 连接 对 象 的 Close 方法 可 以 释放 连接 ,代码 如 下 : 











conn.Close( ); 














调用 连接 对 象 的 Dispose 方法 也 可 以 释放 连接 ,用 法 如 下 : 





conn.Dispose( ); 


考虑 到 操作 数据 库 时 可 能 出 现 各 种 异常 ,用 户 应 尽量 使 用 try-catch 块 捕获 并 处 理 异 
常 ,最 好 是 在 finally 块 中 释放 连接 。 一 般 使 用 以 下 代码 框架 操作 数据 库 ， 


SqlConnection conn = new SqlConnection(connstr); // 创建 连接 对 象 
Try { 
conn. Open( ); 
// 操作 数据 库 
} 
catch(Exception ex){ 
// 处 理 异常 
} 
finally { 
conn. Dispose(); ”// 释放 连接 
1 


从 .NET 2.0 开 始 引 入 了 using 语句 ,可 以 代替 try-finally 的 功能 。 例 如 ， 


using (SqlConnection conn = new SqlConnection(connstr)) { 
conn. Open( ); 
// 在 这 里 工作 

上 


using 语句 定义 了 一 个 范围 ,并 指定 要 创建 和 关闭 的 对 象 (此 处 为 conn 对 象 ) 。 当 本 段 
代码 执行 到 范围 末尾 或 因 抛 出 异常 而 跳出 时 系统 将 自动 清理 using 语句 中 指定 的 对 象 ( 即 
conn 对 象 )。 请 看 以 下 完整 的 示例 代码 。 

例 7-2 连接 pubs 数据 库 ,查询 并 显示 所 有 书籍 的 书号 、 书 名 和 价格 。 





using System; 
using System. Data. SqlClient; 
class Program { 
static void Main() { 
string connstr = (@ "Data Source = (localdb)\MSSQLLocalDB; Initial Catalog = pubs; 
Integrated Security= true"; 
select title id, title, price fronm titles "; 


string qrystr = 
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using ( SqlConnection conn = new SqlConnection(connstr) ) { 
SqlCommand cmd = new SqlCommand( grystr, conn ); 
try { conn. Open( ); 
SqlDataReader reader = cmd.ExecuteReader(); 
while (reader. Read()) { 
Console. WriteLine ("\t{0}\t{1}\t{2}", reader[0], reader[1], reader[2]); 


lj 
reader. Close( ); 
} 
catch (Exception ex) { Console.WriteLine(ex. Message); } 


4. 数据 库 连 接 池 


建立 数据 库 连 接 是 一 项 复杂 且 费 时 的 工作 , 若 每 一 次 操作 数据 库 都 建立 连接 ,使 用 完 后 
又 释放 , 必 将 浪费 大 量 的 时 间 和 资源 。 为 了 提高 效率 ,ASP. NET 提供 了 连接 池 的 机 制 。 在 
Web 应 用 第 一 次 连接 数据 库 时 ,系统 会 隐 含 地 建立 一 定数 量 的 连接 , 放 在 连接 池 中 集中 管 
理 ; 以 后 当 再 次 请 求 该 数据 库 时 直接 从 池 中 “ 借 ” 出 一 个 连接 来 使 用 ,使 用 完成 后 再 归还 到 
池 中 ,这 样 可 以 最 大 程度 地 降低 重复 打开 和 关闭 连接 的 系统 消耗 。 

ADO. NET 通常 根据 连接 字符 串 自 动 创建 连接 池 。 若 连接 字符 串 相同 , 则 使 用 同一 个 
连接 池 。 若 某 个 连接 的 连接 字符 串 与 现 有 池 的 连接 字符 串 不 同 , 系 统 将 创建 一 个 新 的 连接 
池 。ADO. NET 可 同时 保留 多 个 池 ,每 种 配置 各 一 个 。 

ADO. NET 中 的 连接 池 对 开发 者 完全 透明 ,数据 访问 代码 无 须 做 任何 更 改 。 当 调用 
Open 方法 打开 连接 时 ,连接 实际 上 由 连接 池 提 供 而 不 是 新 建 ; 当 调用 Close 或 Dispose 方 
法 释放 连接 时 , 它 并 没有 真正 被 释放 ,而 是 重新 回 到 池 中 等 待 下 一 次 请 求 。 





5. 在 Web.config 文件 中 保存 连接 字符 串 


由 于 ADO. NET 通常 根据 连接 字符 串 创建 连接 池 , 若 不 同 页 面 中 的 连接 字符 串 稍 有 差 
异 , 系 统 将 创建 不 同 的 连接 池 ,这 对 系统 性 能 可 能 会 造成 一 定 的 影响 。 

好 的 解决 办 法 是 将 连接 字符 串 保 存在 配置 文件 Web. config 中 。Web. config 是 一 个 
XML 格式 的 文件 ,每 当 Web 应 用 程序 要 连接 数据 库 时 都 会 从 Web. config 文件 中 的 
< connectionStrings > 或 < appSettings > 配置 结 点 获取 连接 字符 串 的 内 容 , 即 根据 * 键 名 ” 获 
取 其 “ 键 值 ”。 

(1) 在 < connectionStrings > 结 点 中 的 连接 字符 串 ,代码 如 下 : 























<connectionStrings > 

< add name = "connstr" connectionString= "Data Source = .\sqlexpress; Initial Catalog = pubs; 
Integrated Security = true"/> 
</connectionStrings> 
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其 中 ,name 属性 指定 键 名 ,connectionString 属性 指定 键 值 。 在 应 用 程序 中 可 以 通过 静 
态 类 ConfigurationManager 在 < connectionStrings > 结 点 中 获取 连接 字符 串 ,代码 如 下 : 




















using System. Conf iguration; // 导入 ConfigurationManager 类 的 命名 空间 
string connstr = ConfigurationManager. ConnectionStrings["connstr" ].ConnectionString; 


(2) 在 < appSettings > 结 点 中 的 连接 字符 串 , 代 码 如 下 : 





<appSettings > 

<add key = "connstr" value = "Data Source = .\sqlexpress; Initial Catalog= pubs; 
Integrated Security = true"/> 
</appSettings> 


其 中 ,key 属性 指定 键 名 ,value 属性 指定 键 值 。 应 用 程序 可 通过 ConfigurationManager 类 
在 < appSettings > 结 点 中 获取 连接 字符 串 ,代码 如 下 : 


using System, Conf iguration; // 导入 ConfigurationManager 类 的 命名 空间 
string connstr = ConfigurationManager. AppSettings["connstr"]; 


7.2.3 使 用 Command 对 象 


在 建立 与 数据 源 的 连接 后 可 以 使 用 Command 对 象 执行 各 种 SQL 命令 并 从 数据 源 中 
返回 结果 。 和 Connection 对 象 一 样 , 不 同 的 数据 提供 程序 对 应 不 同 的 Command 对 象 ,适用 
于 SQL Server .NET 提供 程序 的 是 SqlCommand 对 象 , 适 用 于 Oracle . NET 提供 程序 的 
是 OracleCommand 对 象 , 适 用 于 OLE DB 驱动 的 是 OleDbCommand 对 象 ,适用 于 ODBC 
驱动 的 是 OdbcCommand 对 象 。 


1. 创建 Command 对 象 


通常 有 3 种 方法 来 创建 Command 对 象 ,分 别 如 下 。 
(1) 创建 Command 对 象 ,同时 指定 SQL 命令 和 数据 库 连 接 : 


SqlCommand cmd = new SqlCommand( "select * from authors", conn); 





(2) 单独 创建 Command 对 象 ,然后 通过 属性 指定 所 用 连接 和 SQL 命令 : 





Sql Command cmd = new SqlCommand() 
cmd. CommandText = "select * from authors"; 
cmd. Connection = conn; 


(3) 在 连接 对 象 上 调用 CreateCommand 方法 创建 Command 对 象 : 





SqlCommand cmd = conn. CreateCommand( ); 
cmd. CommandText = "select x* from authors"; 
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2. Command 对 象 的 常用 成 员 


所 有 Command 对 象 都 从 System. Data. Common. DbCommand 类 继承 ,其 使 用 方法 基 
本 相同 ,Command 对 象 的 常用 属性 和 方法 如 表 7-3 所 示 。 























表 7-3 Command 对 象 的 常用 属性 和 方法 








属性 /方法 说 明 
CommandText 属性 获取 或 设置 一 条 SQL 语句 或 一 个 存储 过 程 作为 要 执行 的 命令 
指定 CommandText 的 类 型 , 若 选 Text, 表示 要 执行 一 条 SQL 语句 ; 若 选 
CommandType 属性 


StoredProcedure, 表 示 要 执行 一 个 存储 过 程 





Connection 属性 


获取 或 设置 该 Command 对 象 依赖 的 数据 库 连 接 对 象 

















Parameters 属性 获取 命令 参数 的 集合 

Cancel() 方 法 尝试 取消 DbCommand 的 执行 

Dispose() 方 法 释放 Command 对 象 所 使 用 的 资源 

EectteNonQugiy() 汶 法 执行 一 个 非 查询 的 SQL 语句 (insert、update 或 delete) 或 存储 过 程 ,不 返回 
结果 集 

ExecuteReader() 方 法 执行 select 查询 语句 或 存储 过 程 ,返回 一 个 结果 集 





ExecuteScalar() 方 法 


执行 聚合 函数 ,返回 一 个 标量 值 





3. 使 用 ExecuteReader 方法 


调用 Command 对 象 的 ExecuteReader() 方 法 可 以 执行 一 条 select 语句 ,返回 一 个 
DataReader 对 象 。 例 如 : 


SqlCommand cmd = conn .CreateCommand( ); 
cmd. CommandText = "select x from authors"; 
SqlDataReader dr = cmd.ExecuteReader(); 


例 7-3 在 NorthWind 数据 库 中 根据 顾客 ID 查询 订单 信息 ,运行 效果 如 图 7-8 所 示 。 


















顾客 ， 


YO oreo pe 









rderid| orderdate shipaddress 











10248 |1996/7/4 0:00:00 |59 rue de TAbbaye| 








‖ |10274 |1996/8/6 0:00:00 |59 rve de TAbbaye| 














10295 |1996/9/2 0:00:00 |59 rue de TAbbaye| 














10737 |1997/11/11 0:00:00|59 rue de TAbbaye| 

















10739 |1997/11/12 0:00: 00|59 rue de TAbbaye| 











图 7-8 根据 顾客 ID 查询 该 顾客 的 订单 


这 是 一 个 典型 的 查询 程序 ,使 用 了 SQL Server 早期 版 本 的 NorthWind 数据 库 , 建 库 
脚本 见 参 考 资料 中 的 instnwind. sql, 打开 该 脚本 并 运行 即 可 建立 数据 库 , 也 可 以 到 
SQL Server 的 数据 目录 中 复制 northwind. mdf 和 northwind. 1df 两 个 文件 到 Web 应 用 的 























第 7 章 ”数据 访问 技术 2o) 


App_Data 文件 夹 中 使 用 。 
使 用 Visual Studio 设计 界 























卫 


,并 为 查询 按钮 添加 以 下 代码 : 














protected void btnqry Click(object sender, EventArgs e) { 
string connstr = ConfigurationManager.ConnectionStrings[ "nwdconnstr"].ConnectionString ; 
string sql = "select orderid, orderdate, shipaddress from orders where customerid = '" + 
tbxuid. Text + "ni 
using (SqlConnection conn = new SqlConnection(connstr)) { 
SqlCommand cmd = conn. CreateCommand(); 
cmd. CommandText = sql; 
conn. Open( ); 
SqlDataReader dr = cmd.ExecuteReader(); 
GridViewl. DataSource = dr; 
GridView1. DataBind( ); 
dr.Close( ); 


上 述 代 码 的 select 语句 采用 字符 串 拼接 的 方式 生成 ,这 种 方式 存在 一 定 的 安全 隐患 , 容 
易 被 SQL 注入 攻击 。 为 了 解决 这 个 问题 ,通常 使 用 参数 化 命令 , 即 在 SQL 文本 中 使 用 占 位 
符 来 代表 命令 参数 ,然后 通过 Parameter 对 象 将 参数 值 传递 进来 。 例 如 根据 顾客 ID 查询 订 
单 可 以 将 顾客 ID 作为 参数 输入 ,相关 代码 如 下 : 


cmd. CommandText = "select orderid, orderdate, shipaddress from orders where customerid = 
@custid"; 

SqlParameter parameter = new SqlParameter("(@custid", SqlDbType. VarChar); 

parameter. Value = tbxuid. Text; 

cmd. Parameters. Add( parameter); 

SqlDataReader dr = cmd.ExecuteReader( ) ; 


参数 化 命令 也 可 以 同时 传递 多 个 参数 。 例 如 要 查询 指定 用 户 、 指 定时 间 段 内 的 所 有 订 
单 ,可 以 使 用 以 下 代码 : 


cmd. CommandText = "select orderid, orderdate, shipaddress from orders where customerid 
= @custid and orderdate between @fromdate and @todate"; 

cmd. Parameters. Add( "(@custid", SqlDbType. VarChar); 

cmd. Parameters. Add("@startdate", SqlDbType. DateTime); 

cmd. Parameters. Add("(@enddate", SqlDbType. DateTime); 

cmd. Parameters["(@custid" ]. Value = tbxuid. Text; 

cmd. Parameters["@startdate"]. Value = "1996— 01— 01"; 

cmd. Parameters["(@enddate"].Value = "1997— 01— 01"; 


4. 使 用 ExecuteScalar 方法 














S| 


调用 Command 对 象 的 ExecuteScalar() 方 法 将 返回 查询 结果 集 的 第 1 行 第 1 列 的 值 。 
该 方法 常用 于 返回 聚合 函数 的 计算 结果 ,例如 要 统计 并 显示 employees 表 中 所 有 员工 的 数 
量 ,可 以 使 用 以 下 代码 : 
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using (SqlConnection conn = new SqlConnection(connstr)) { 
SqlCommand cmd = conn. CreateCommand() 


cmd. CommandText = "select count 


conn. Open(); 


(*#) from employees"; 


int num = (int)cmd. FExecuteScalar(); 
lblmsg. Text = string.Format(" 员 工 总 数 : <b>{0}</b>", nunm); 


注意 ,ExecuteScalar 方法 的 返回 
制 转换 成 合适 的 数据 类 型 。 


5. 使 用 ExecuteNonQuery 方法 


结果 为 object 类 型 ,用 户 一 定 要 根据 查询 语句 将 其 强 


调用 Command 对 象 的 ExecuteNonQuery 方法 ,执行 insert、update、delete、create table 
等 语句 ,不 返回 结果 集 。 请 看 以 下 代码 : 


using (SqlConnection conn = new SqlConnection(connstr)) { 


conn. Open( ); 


SqlCommand cmd = conn. CreateCommand( ); 


// 执行 插入 操作 


cmd, CommandText = "insert into employees(LastName, FirstName) values ('Tom', 'Cat')"; 


int num = cmd.ExecuteNonQuery( 


); 


lblmsg.Text = string.Format("<br /> 共 插 入 记录 : <b> {0} 条 </b>",nunm); 


// 执行 更 改 操作 


cmd. CommandText = "update employees set LastName = 'Jerry'，FirstName = 'Mouse' " 


+ " where EmployeeID = 9"; 


num = cmd.ExecuteNonQuery(); 


lblmsg. Text += string. Format("<br /> 共 修 改 记录 : <b> {0} 条 </b>",nunm); 


// 执行 删除 操作 


cmd. CommandText = "delete from employees where EmployeeID > 9"; 


num = cmd,ExecuteNonQuery(); 


lblmsg. Text = string.Format("<br /> 共 删 除 记录 : <b> {0} 条 </b>",nunm); 


} 


ExecuteNonQuery 方法 的 返回 值 为 整 型 数 , 表 示 执 行 命令 后 受 影响 的 记录 行 数 。 


6. 执行 存储 过 程 





存储 过 程 是 保存 在 数据 库 中 的 可 批量 执行 的 一 条 或 多 条 SQL 语句 , 它 与 函数 类 似 , 可 

以 通过 输入 参数 接收 数据 ,也 可 以 通过 输出 参数 返回 数据 ,使 用 存储 过 程 具有 很 多 优点 。 
。 可 以 大 幅度 提高 程序 性 能 : 由 于 存储 过 程 是 多 条 语句 的 复合 体 , 只 访问 一 次 数据 库 
就 可 以 完成 很 多 工作 , 比 使 用 Commamd 对 象 一 次 次 向 数据 库 发 送 SQL 语句 的 效 





率 要 高 得 多 。 存 储 过 程 在 数 
。 简化 应 用 程序 的 设计 : 对 于 
































据 库 中 进行 了 编译 和 优化 ,执行 效率 也 提高 了 很 多 。 
E 常 复杂 的 业务 处 理 ( 例 如 销售 统计 ) , 若 将 处 理 尿 辑 封 
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装 在 存储 过 程 中 , 则 应 用 程序 中 只 需 调用 存储 过 程 就 可 以 完成 所 有 工作 ,有 效 地 降 
低 了 程序 的 复杂 度 
。 有 利于 人 员 分 工 ， 大 型 项 目 中 明确 的 人 员 分 工 非常 重 要 ,使 用 存储 过 程 可 以 将 复杂 
的 数据 处 理 逻 辑 分 发 给 数据 库 设计 人 员 ,任务 更 加 明确 。 
使 用 Command 对 象 调用 存储 过 程 的 方式 与 执行 SQL 命令 类 似 ,只 需 将 CommandType 属 
性 设 定 为 StoredProcedure。 
例 7-4 在 NorthWind 数据 库 中 调用 存储 过 程 ,查询 指定 类 别 下 所 有 产品 的 销售 量 。 
程序 运行 效果 如 图 7-9 所 示 。 


[ 
































bs | twp/nocahostioss, p - © 登 要 舌尖 别 查 启 产 品 销 ， x 


类 别名 : [Seapod | 二 二 | 
ProductName fTotalPu 


[Boston Crab Meat 5318.00 
Camarvon Tigers 8497.00 
Escargots de Bourgogne 2427.00 

Gravad lax 1456.00 
| 9002.00 
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Inlagd Sill 3938.00 
IJack's New England Clam Chowder|2916.00 
3725.00 
4744.00 
| 180.00 

IRogede sild 891.00 
Spegesild 1817.00 






































图 7-9 根据 类 别 查询 产品 销售 金额 程序 的 运行 效果 


打开 NorthWind 数据 库 , 在 "可 编程 性 -~ 存储 过 程 ” 下 可 以 看 到 系统 内 置 的 几 个 存储 
过 程 , 其 中 有 SalesByCategory, 本 例 将 调用 该 存储 过 程 。 
建立 Web 窗 体 ,为 查询 按钮 的 单 击 事件 编写 以 下 代码 : 


Protected void btnqry_Click(object sender, EventArgs e) { 
string connstr = 
ConfigurationManager. ConnectionStrings[ "nwconnstr"]. ConnectionString; 
using (SqlConnection conn = new SqlConnection(connstr)) { 
SqlCommand cmd = conn.CreateCommand(); 
cmd. CommandText = "SalesByCategory"; 
cmd. CommandType = CommandType.StoredProcedure; 
SqlParameter parameter = new SqlParameter("(@CategoryName", 
SqlDbType. VarChar) ; 
parameter. Value = tbxcatname.Text; 
cmd. Parameters. Add( parameter); 
conn. Open( ); 
SqlDataReader dr = cmd.ExecuteReader(); 
GridView1.DataSource = dr; 
GridViewl.DataBind( ); 
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dr.Close(); 
4 
} 





在 本 例 中 将 CommandText 属性 设置 为 存储 过 程 名 ,将 CommandType 属性 设置 为 命 
令 类 型 枚 举 中 的 StoredProcedure, 然 后 通过 参数 将 类 型 名 称 传递 给 存储 过 程 。 由 于 该 过 程 
执行 后 将 返回 记录 集 , 所 以 调用 了 Command 对 象 的 ExecuteReader 方法 。 

若 存储 过 程 的 返回 结果 不 是 记录 集 , 可 通过 ExecuteNonQnuery 方法 调用 。 

例 7-5 ”向 employee 表 中 插 和 人 一 条 记录 ,并 返回 该 员工 的 ID 号。 

在 employee 表 中 ,EmployeeID 为 关键 码 字 段 。 若 使 用 Command 对 象 执行 insert 语句 
录 人 员工 ,那么 要 得 到 刚 录入 记录 的 员工 号 将 是 一 件 麻烦 事 。 使 用 存储 过 程 可 以 解决 这 个 
问题 ,在 存储 过 程 中 执行 完 insert 语句 后 立刻 调用 @@IDENTITY 函数 即 可 得 到 新 添加 记 
录 的 EmployeeID。 

在 数据 库 中 执行 以 下 脚本 定义 InsertEmployee 存储 过 程 : 























create procedure InsertEmployee 
@LastName varchar( 20), 
@FirstName varchar(10), 
@EmployeelD int output 
as 
insert into employees (LastName, FirstName) values ((@LastName, @FirstName); 
set @EmployeeID = (@(@IDENTITY; 


该 存储 过 程 有 3 个 参数 ,前 两 个 为 输入 参数 ,用 于 接收 员工 的 名 和 姓 ,最 后 一 个 为 输出 
参数 ,可 以 将 新 添加 记录 的 EmployeeID 带 回来 。 

存储 过 程 定 义 好 后 下 一 步 是 在 应 用 程序 中 调用 它 。 建 立 添加 员工 记录 的 Web 页 面 ,在 
“添加 ”按钮 的 单 击 事件 中 编写 以 下 代码 : 


string connstr = 
ConfigurationManager. ConnectionStrings[ "nwconnstr" ]. ConnectionString; 
using (SqlConnection conn = new SqlConnection(connstr)) { 
SqlCommand cmd = conn.CreateCommand(); 
cmd. CommandText = "InsertEmployee"; 
cmd. CommandType = CommandType.StoredProcedure; 
cmd. Parameters. Add( "(@LastName", SqlDbType. VarChar, 20); 
cmd. Parameters. Add( "(@FirstName", SqlDbType.VarChar, 10); 
cmd. Parameters["(@LastName"].Value = tbxlname.Text; 
cmd. Parameters["(@FirstName"]. Value = tbxfname. Text; 
cmd. Parameters. Add( "(EmployeeID", SqlDbType. Int); 
cmd. Parameters["(@EmployeeID"].Direction = ParameterDirection. Output; 
conn. Open( ); 
int n = cmd. ExecuteNonQuery(); 
lblmsg. Text += string. Format("Inserted {0} Records <br />", n); 
int empid = (int)cmd. Parameters["(@EmployeeID"].Value; 
lblmsg. Text += "New ID : ”+ empid.ToString(); 
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上 述 程序 为 Command 对 象 的 实例 cmd 添加 了 3 个 参数 , 即 @LastName、@FirstName 
和 @EmployeeID。 前 两 个 参数 没有 指定 Direction 属性 ,默认 为 Input, 即 输入 参数 ; 第 3 个 
参数 要 从 存储 过 程 中 带 回 一 个 值 ,定义 为 输出 参数 ,将 其 Direction 属性 设置 为 Output。 
于 该 存储 过 程 不 返回 记录 集 ,所 以 调用 ExecuteNonQuery 方法 。 该 方法 实际 上 带 回 了 两 个 
值 ,一 是 方法 的 返回 值 , 代 表 insert 语句 执行 后 影响 的 记录 条 数 , 本 例 为 1; 二 是 新 添加 记录 
的 EmployeeID, 通 过 输出 参数 获得 , 即 : 
































int empid = (int)cmd. Parameters["(@FEmployeeID"].Value; 


7.2.4 使 用 DataReader 对 象 


数据 库 系统 最 常用 的 操作 是 数据 查询 ,这 由 select 语句 来 完成 ,查询 结果 将 返回 一 个 记 
录 集 。 通 常 使 用 两 种 方式 访问 记录 集 ,一 是 使 用 DataReader, 二 是 使 用 DataTable。 

DataReader 允许 用 户 以 只 读 、 只 进 的 方式 每 次 读 取 一 条 记录 进行 处 理 。 该 方式 占用 的 
内 存 资源 极 少 ,操作 效率 极 高 ,是 获取 数据 最 简单 、 高 效 的 方式 。 

每 种 数据 提供 程序 都 定义 了 各 自 的 DataReader 类 ,包括 SqlDataReader .OracleDataReader、 
OleDbDataReader、OdbcDataReader 等 ,它们 都 从 DbDataReader 类 继承 ,其 核心 成 员 如 
表 7-4 所 示 。 

表 7-4 DataReader 对 象 的 核心 成 员 
HasRows 属性 ”| 指示 该 DataReader 中 是 否 包 含 数据 
FieldCount 属性 | 获取 当前 行 中 的 列 数 
Read( ) 方 法 将 游标 移动 到 记录 集 的 下 一 行 
获取 当前 行 中 指定 序号 的 字段 的 值 ,系统 将 根据 数据 源 中 该 字段 的 数据 类 型 匹配 一 
个 最 相近 的 .NET 数据 类 型 返回 
获取 当前 行 中 指定 序号 的 字段 值 ,但 明确 指定 了 返回 值 的 类 型 ,所 以 返回 类 型 与 方法 
GetXxx() 方 法 “| 中 指定 的 类 型 一 致 。 
例如 GetInt32() 、GetChar() .GetDateTime() 等 
Close() 方 法 关闭 DataReader 对 象 














GetValue() 方 法 














在 使 用 DataReader 对 象 操 作 记录 集 时 要 先 移动 游标 定位 到 指定 行 , 然 后 再 获取 该 行 中 
各 列 的 数据 。 游 标 初始 位 于 第 一 条 记录 的 前 面 , 此 时 无 法 读 取 数据 ,只 有 在 调用 Read 方法 
后 让 游标 下 移 一 行 才 可 以 操作 。Read 方法 返回 一 个 布尔 值 , 表 示 游 标 是 否 已 经 指向 记录 集 
的 末尾 ,只 有 返回 true 才能 读 取 数据 ,返回 false 说 明 已 经 没有 数据 。 

例 7-6 查询 并 显示 categories 表 中 所 有 类 别 的 ID 和 名 称 。 
建立 Web 页 面 ,为 Page_Load 事件 编写 以 下 代码 : 









































string connstr = ConfigurationManager.ConnectionStrings["nwconnstr"].ConnectionString; 
using (SqlConnection conn = new SqlConnection(connstr)) 
1 

SqlCommand cmd = conn.CreateCommand(); 
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cmd. CommandText = "select CategoryID, CategoryName from categories"; 
conn. Open(); 
SqlDataReader reader = cmd. FxecuteReader(); 
StringBuilder sb = new StringBuilder(""); 
sb. Append("<table><tr><td> CategoryID </td><td> CategoryName </td></tr >"); 
while (reader. Read()) { 
sb. Append("<tr><td>"); 
sb. Append( reader[ 0]); 
sb. Append( "</td><td>"); 
sb. Append( reader[ "CategoryName" ]); 
sb. Append( "</td></tr >"); 
js 
sb. Append("</table >"); 
reader. Close(); 
lblmsg. Text = sb.ToString(); 
} 


可 以 看 出 , 当 执 行 ExecuteReader 方法 并 返回 一 个 DataReader 对 象 的 记录 集 后 ,在 
while 循环 中 不 断 调用 DataReader 对 象 的 Read 方法 遍历 记录 集 ,直到 游标 指向 记录 集 的 末 
尾 。 游 标 每 定位 到 一 行 ,系统 都 会 自动 将 该 行 数 据 获 取 到 内 存 中 ,这 时 向 DataReader 对 象 
传递 列 的 名 称 或 序号 就 可 以 访问 指定 列 的 数据 。 

使 用 GetValue 方法 或 GetXxx 方 法 传递 列 号 进去 ,也 可 以 获取 指定 列 的 数据 ,使 用 后 
一 种 方法 明确 地 指定 了 所 获取 的 数据 类 型 ,执行 效率 更 高 一 些 。 


《3 使 用 基于 内 容 的 对 象 访问 数据 库 


DataReader 是 基于 连接 的 对 象 , 只 有 在 数据 处 理 完成 后 才 可 以 断 开 与 数据 源 的 连接 。 

DataSet 架构 使 用 了 ADO. NET 非 连接 的 特性 , 称 为 基于 内 容 的 对 象 , 它 可 以 将 数据 批 
量 读 入 内存, 然后 进行 离线 处 理 ,最 后 将 处 理 结 果 批 量 写 回 数据 库 中 。 为 了 实现 DataSet 与 
数据 库 的 交互 ,通常 使 用 DataAdapter 对 象 。 

DataSet 主要 包含 两 种 元 素 ,一 是 表 的 集合 ,二 是 表 间 关系 的 集合 ,前 者 代表 数据 ,后 者 
代表 约束 。 


7.3.1 使 用 DataTable 


DataTable 是 DataSet 架构 的 核心 ,代表 内 存 中 的 表 , 使 用 它 可 以 离线 处 理 数 据 、 前 后 移 
动 游标 定位 记录 快速 检索 记录 、 对 记录 进行 排序 、 按 条 件 过 滤 记 录 等 。DataTable 既 可 以 
包含 在 DataSet 中 ,也 可 以 游离 于 DataSet 之 外 独立 存在 (这 时 将 无 法 建立 表 间 约束 ,也 无 
法 实现 完整 性 约束 ) 。 


1. 创建 DataTable 对 象 





DataTable 中 主要 包含 两 个 方面 的 信息 ,一 是 架构 ,通过 列 的 集合 指定 ; 二 是 数据 ,通过 
行 的 集合 指定 。 

















第 7 章 ”数据 访问 技术 (2s) 


若 以 编程 的 方式 创建 DataTable, 则 要 先 创建 各 列 的 DataColumn 对 象 并 将 其 添加 到 
DataColumnCollection 中 ,这 样 才能 确定 表格 的 架构 。 请 看 以 下 示例 : 




















DataTable dt = new DataTable(); 

DataColumn col = dt.Columns. Add("FEmployeeID", typeof( Int32)); 
col. Unique = true; 

dt.Columns. Add( "LastName", typeof(String)); 

dt.Columns. Add("FirstName", typeof(String)); 


通过 DataTable 对 象 的 Columns 属性 可 以 获取 其 列 集 ,在 列 集 上 调用 Add 方法 ,并 传 
入 列 名 和 数据 类 型 来 创建 列 对 象 。 用 户 还 可 以 在 列 对 象 上 指定 约束 ,例如 本 例 中 对 CustID 
列 设 定 了 唯一 约束 , 即 所 有 记录 的 CustID 不 能 重复 。 








2. 向 DataTable 中 添加 数据 


DataTable 的 数据 包含 在 行 集中 ,每 行 数据 用 一 个 DataRow 对 象 表 示 。 用 户 可 通过 编 
程 方式 向 DataTable 的 行 集中 添加 行 数据 ,示例 代码 如 下 : 


DataRow row = dt.NewRow(); // 建立 一 个 新 行 


row[0] = 1; // 给 新 行 的 第 1 列 赋值 
row["LastName"] = "Tom"; // 给 新 行 的 LastName 列 赋值 
row["FirstName"] = "Cat"; 

dt. Rows. Add(row); // 将 行 对 象 添加 到 表 中 


调用 DataTable 对 象 的 NewRow 方法 返回 一 个 新 行 。 每 行 都 包含 若干 列 ,通过 指定 列 
的 序号 或 名 称 可 以 访问 特定 的 列 。 通 过 DataTable 对 象 的 Rows 属性 可 以 访问 其 行 集 ,在 
行 集 上 调用 Add 方法 可 以 将 行 对 象 添加 到 表 中 。 

通常 从 数据 库 中 检索 数据 并 填充 到 DataTable 中 ,最 直接 的 方式 是 调用 DataTable 对 
象 的 Load 方 法 ,并 传人 一 个 DataReader 对 象 , 这 样 系统 会 自动 从 DataReader 中 不 断 获 取 
数据 并 装载 到 DataTable 中 。 请 看 以 下 示例 : 

cmd. CommandText = "select EmployeeID, LastName, FirstName from employees"; 


SqlDataReader reader = cmd. ExecuteReader(); 
dt. Load(reader); 











在 DataSet 架构 中 通常 使 用 DataAdapter 对 象 创建 数据 表 并 向 
容 将 在 后 续 章 节 中 介绍 。 

当 使 用 Load 方法 装载 数据 或 者 使 用 DataAdapter 对 象 填充 数据 时 ,由 于 可 以 连接 到 数 
据 库 , 自 动 获取 表 的 架构 信息 ,所 以 不 需要 专门 编写 代码 定义 数据 表 结 构 , 只 要 创建 空 的 
DataTable 对 象 即 可 开始 装载 或 填充 数据 。 


3. 遍历 表 中 数据 


DataTable 的 Rows 属性 返回 行 的 集合 ,其 中 每 个 元 素 就 是 一 条 记录 ,通常 使 用 foreach 
循环 遍历 行 集中 的 每 一 个 DataRow。DataRow 又 是 字段 值 的 容器 ,可 以 通过 字段 序号 或 名 


m 


中 填充 数据 ,这 些 内 
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称 访 问 它 们 。 下 面 的 代码 演示 了 如 何 遍 历 并 显示 DataTable 中 的 数据 。 


StringBuilder sb = new StringBuilder("< table>"); 
sb. Append("<tr><td>FirstName </td><td> LastName </td></tr >"); 
foreach (DataRow row in dt.Rows) { 

sb. Append("<tr><td>"); 

sb. Append( row[ "FirstName" ]. ToString( )); 

sb. Append("</td><td>"); 

sb. Append( row[ "LastName"]. ToString()); 

sb. Append("</td></tr >"); 


} 
sb. Append( "</table >"); 
lblmsg. Text = sb.ToString(); 


4. 检索 表 中 数据 


DataTable 提供 了 一 个 Select 方 法 ,可 以 返回 满足 条 件 的 行 集 。 该 方法 使 用 的 表达 式 
与 SQL Select 语句 中 where 子 句 的 作用 类 似 ,只 是 Select 方法 是 在 内 存 表 中 查询 ,不 执行 
任何 数据 库 操作 。 例 如 ,假设 products 数据 表 中 包含 所 有 商品 的 信息 ,要 查找 类 别 ID 为 2 
的 商品 并 显示 其 名 称 , 可 以 使 用 以 下 代码 片段 。 


DataRow[ ] matchrows = dt.Select("CategoryID = 2"); 
StringBuilder sb = new StringBuilder("<ul >"); 
foreach(DataRow row in matchrows) 
{ 
sb. Append("<1i>"); 
sb. Append( row[ "ProductName"]. ToString()); 
sb. Append("</1i>"); 
1 
sb. Append( "</ul >"); 
lblmsg. Text = sb.ToString(); 


由 于 Select 方法 的 返回 值 为 行 集 , 所 以 使 用 了 DataRow 的 数组 来 保存 查询 结果 ,然后 
使 用 foreach 循环 遍历 所 有 行 。 

DataTable 也 允许 用 户 按 主键 检索 特定 行 ,这 要 先 在 DataTable 上 定义 主键 ,然后 在 行 
集 上 使 用 Find 方法 。 请 看 以 下 代码 片段 : 


// 为 数据 表 定义 主键 列 

DataColumn[] columns = new DataColumn[1]; 

columns[0] = dt.Columns["ProductID"]; 

dt.PrimaryKey = columns; 

// 根据 主键 进行 检索 (查询 商品 号 为 5 的 行 ) 

DataRow findrow = dt.Rows.Find(5); 

// 输出 检索 结果 

if (findrow != null) lblmsg. Text = findrow["ProductName"].ToString(); 
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DataView 为 DataTable 对 象 定 义 数 据 视 图 ,使 DataTable 能 够 支持 自 定义 过 滤 和 数据 
排序 。 在 数据 绑 定 的 场合 中 DataView 特别 有 用 ,利用 它 既 可 以 选 出 表 中 的 部 分 数据 来 显 
示 , 也 可 以 按 不 同方 式 排序 显示 ,并 且 不 会 影响 DataTable 中 的 真实 数据 。 

每 个 DataTable 都 有 一 个 默认 的 DataView 与 之 关联 ,使 用 DataTable 对 象 的 
DefaultView 属性 可 以 引用 该 数据 视图 ,也 可 以 在 同一 个 表 上 创建 多 个 表示 不 同 视图 的 
DataView 对 象 。 


7.3.2 使 用 DataView 























1. 数据 排序 


借助 DataView 对 象 的 Sort 属性 设置 合适 的 排序 表达 式 就 可 以 实现 数据 排序 。 下 面 的 
示例 演示 了 如 何 对 products 表 中 的 数据 进行 排序 显示 。 


DataTable dt = new DataTable(); 
string connstr = 
ConfigurationManager, ConnectionStrings[ "nwconnstr"]. ConnectionString; 
using (SqlConnection conn = new SqlConnection(connstr)) 
| 
SqlCommand cmd = conn.CreateCommand(); 
cmd. CommandText = "select ProductID, ProductName, UnitPrice from products "; 
conn. Open( ); 
SqlDataReader reader = cmd. ExecuteReader(); 
dt. Load(reader); 
) 
GridView1.DataSource = dt.DefaultView; 
GridViewl. DataBind( ); 
DataView dv = new DataView(dt); 
dv. Sort = "UnitPrice"; // 设置 按 UnitPrice 字段 值 排序 
GridView2.DataSource = dv; 
GridView2. DataBind( ); 


该 示例 中 的 两 个 Gridview 控件 显示 了 同一 个 DataTable 中 的 数据 。 其 中 ,GridViewl 
使 用 了 DataTable 的 默认 数据 视图 ,而 GridView2 使 用 了 按 UnitPrice 列 排 序 的 数据 视图 。 
若 需 要 按 多 个 字段 组 合 排列 ,可 以 使 用 以 下 形式 

















dv.Sort = "ProductName ，UnitPrice "; 


2. 数据 过 滤 


借助 DataView 对 象 的 RowFilter 属性 可 以 自 定 义 过 滤 条 件 , 将 DataTable 中 满足 条 件 
的 记录 选择 出 来 显示 。RowFilter 属性 和 SQL 查询 中 的 where 子 句 的 功能 类 似 , 条 件 表 达 
式 的 书写 格式 也 基本 相同 ,详细 用 法 请 读者 参阅 MSDN 文档 。 下 面 的 代码 片段 演示 了 如 何 
从 DataTable 中 选 出 价格 超过 40 元 的 产品 以 及 产品 名 以 *M? 开 头 的 记录 并 分 别 显示 。 
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dt. DefaultView. RowFilter = "UnitPrice > 40"; 
GridView1.DataSource = dt. DefaultView; 
GridView1.DataBind( ) 7 

DataView dv = new DataView(dt); 

dv.RowFilter = "ProductName Like 'M%'"; 
GridView2.DataSource = dyv; 

GridView2. DataBind( ); 


7.3.3 使 用 DataRelation 


// 定义 过 滤 条 件 


在 DataSet 中 不 仅 可 以 定义 数据 表 , 还 可 以 定义 表 之 间 的 关系 ,以 方便 地 实现 数据 导 
航 。 例 如 ,在 客户 表 和 订单 表 之 间 建 立 DataRelation 后 ,可 以 方便 地 根据 客户 号 检索 该 客户 
的 所 有 订单 。 请 看 以 下 代码 片段 : 


// 在 customers 表 和 orders 表 之 间 建 立 关系 
DataRelation customerOrdersRelation = 


customerOrders. Relations. Add( "custOrders", 
customerOrders. Tables[ "customers" ]. Columns["CustomerID"], 
customerOrders. Tables[ "orders" ]. Columns["CustomerID"]); 


// 遍历 customers 表 中 的 每 一 个 顾客 


foreach (DataRow custRow in customerOrders. Tables[ "customers"].Rows) { 
Console. WriteLine( custRow[ "CustomerID" ].ToString( )); 


// 根据 DataRelation 获取 该 顾客 的 所 有 订单 


foreach (DataRow orderRow in custRow. GetChildRows(customerOrdersRelation)) { 
Console. WriteLine(orderRow[ "OrderID"].ToString( )); 


l. 


1. 建立 数据 表 之 间 的 关系 


使 用 DataRelation 可 以 使 两 个 DataTable 通过 DataColumn 对 象 建 立 彼此 关联 ,这 类 
似 于 数据 库 中 的 “主键 /外 键 ? 关 系 。DataRelation 是 在 父 表 和 子 表 中 的 匹配 列 之 间 创 建 的， 
要 求 这 两 个 列 的 数据 类 型 必须 相同 ,但 列 名 可 以 不 同 。 


建立 数据 表 间 关系 的 代码 如 下 : 
// 在 主 表 和 子 表 中 确定 建立 关系 的 匹配 列 


DataColumn parentColumn = DataSet1. Tables["customers"]. Columns["CustID"]; 


DataColumn childColumn = 
// 根据 匹配 列 建立 关系 


DataSet1. Tables["orders"].Columns["CustID"]; 


DataRelation relCustOrder = new DataRelation ("CustomersOrders", parentColumn, childColumn ); 








在 调 




















主键 ) 及 子 表 中 的 列 ( 相 当 于 外 键 ) 。 





DataRelation 类 的 构造 器 时 需要 传人 3 个 参数 , 即 关 系 的 名 称 、 主 表 中 的 列 ( 相 





在 关系 创建 好 后 还 要 将 其 添加 到 数据 集 的 关系 集合 中 ,代码 如 下 : 





DataSet1. Relations. Add(relCustOrder); 
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通过 DataSet 对 象 的 Relations 属性 得 到 关系 集合 ,再 调用 其 Add 方法 将 新 创建 的 关系 
加 入 集合 。 用 户 也 可 以 通过 实例 中 的 方法 在 创建 关系 的 同时 将 其 加 入 集合 中 。 


2. 根据 关系 进行 数据 导航 


建立 关系 的 目的 是 在 主 表 和 子 表 之 间 进 行 数据 导航 , 即 根据 主 表 中 某 行 的 数据 在 子 表 
中 获取 与 之 匹配 的 行 , 或 根据 子 表 中 的 某 行 数据 获取 主 表 中 的 相应 行 。 
主 表 的 行 对 象 调用 GetChildRows 方法 可 得 到 子 表 中 与 之 匹配 的 行 ,例如 
























































DataRow [ ] orderRows = customerRow. GetChildRows(customerOrdersRelation) 


子 表 的 行 对 象 调用 GetParentRow 方法 可 获得 主 表 中 的 匹配 行 ,例如 : 


DataRow customerRow = orderRow. GetParentRow (customerOrdersRelation) 


在 电子 商务 网 站 中 经 常 要 根据 类 别 查询 产品 并 生成 报表 ,这 时 在 类 别 表 和 产品 表 之 间 
建立 关系 就 非常 重要 。 


7.3.4 使 用 DataAdapter 


在 ADO. NET 体系 中 ,DataAdapter 作为 数据 源 与 DataSet 之 间 的 桥梁 起 着 承上启下 
的 作用 。 利 用 它 可 以 将 数据 源 中 的 数据 填充 到 DataSet, 也 可 以 将 DataSet 中 所 做 的 数据 更 
改 保存 到 数据 源 中 。 

DataAdapter 建立 在 Connection 之 上 ,内 部 包含 4 个 命令 对 象 , 即 SelectCommand、 
InsertCommand 、 UpdateCommand 和 DeleteCommand。SelectCommand 对 象 用 于 从 数据 
源 中 检索 数据 ,其 他 3 个 对 象 用 于 将 数据 更 改写 回 数据 源 。 


1. 填充 数据 


在 DataAdapter 的 4 个 命令 对 象 中 只 有 SelectCommand 是 必须 的 。 当 调用 DataAdapter 
对 象 的 Fill 方法 时 ,实际 上 是 先 使 用 SelectCommand 对 象 检 索 数 据 ,然后 再 填充 到 
DataTable 中 。 请 看 以 下 示例 代码 : 





string connstr = ConfigurationManager.ConnectionStrings["nwconnstr"].ConnectionString; 
SqlConnection conn = new SqlConnection(connstr); 

string sql = "select EmployeelID, LastName, FirstName from employees"; 
// 创建 Datahdapter 对 象 , 需 传人 要 执行 的 查询 语句 及 连接 对 象 
SqlDataAdapter da = new SqlDataAdapter(sql, conn); 

// 创建 DataSet 对 象 ,并 向 其 中 的 employees 表 填 充 数 据 

DataSet ds = new DataSet(); 

da.Fill(ds, "employees"); 

StringBuilder sb = new StringBuilder("< table>"); 

sb. Append("<tr><td>FirstName </td><td> LastName </td></tr >"); 
// 遍历 包含 在 DataSet 中 的 表 中 的 数据 
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foreach (DataRow r in ds. Tables["employees"].Rows) { 
sb. Append("<tr><td>"); 
sb. Append( r["FirstName"].ToString()); 
sb. Append("</td><td>"); 
sb. Append( r["LastName" ]. ToString()); 
sb. Append("</td></tr >"); 
} 
sb. Append("</table >"); 
lblmsg. Text = sb.ToString(); 


在 创建 DataAdapter 对 象 时 ,需要 指定 其 连接 属性 及 查询 语句 ,以便 构建 
SelectCommand 对 象 ; 也 可 以 先 创建 好 Command 对 象 ,然后 将 它 赋 给 DataAdapter 对 象 的 
SelectCommand 属性 。 调 用 Fill 方法 向 数据 表 中 填充 数据 ,第 一 个 参数 指定 DataSet 对 象 ， 
第 二 个 参数 指定 要 填充 的 DataTable 名 称 ; 若 DataSet 中 无 此 名 称 的 数据 表 , 则 自动 创 

注意 ,在 这 段 代码 中 并 没有 打开 和 关闭 数据 库 连 接 的 代码 ,这 是 由 DataAdapter 自动 执 
行 的 。 当 调用 Fill 方法 时 , DataAdapter 以 隐 含 的 方式 先 打开 到 数据 源 的 连接 ,再 执行 
select 命令 ,最 后 关闭 数据 库 连 接 。 


2. 更 新 数据 


调用 DataAdapter 对 象 的 Update 方法 ,可 以 将 DataSet 中 的 更 改写 回 数据 源 。Update 
方法 包括 两 个 参数 ,一 个 是 DataSet 实例 , 另 一 个 是 DataTable 对 象 。 若 未 指定 DataTable， 
则 默认 使 用 DataSet 中 的 第 一 个 DataTable。 

当 调 用 Update 方法 时 ,DataAdapter 会 分 析 在 DataTable 上 已 做 的 更 改 , 并 执行 相应 
的 SQL 语句 将 更 改 保存 到 数据 库 中 。 这 些 更 改 包括 插入 、 更 新 以 及 删除 等 ,分 别 对 应 
DataAdapter 的 InsertCommand、UpdateCommand 和 DeleteCommand。 


请 看 以 下 示例 : 

















using (SqlConnection connection = new SqlConnection(connectionString)) { 
// 创建 Datahdapter 对 象 并 设置 其 SelectCommand, 以 便 填充 数据 
SqlDataAdapter dataAdpater = new SqlDataAdapter( 
"select CategoryID, CategoryName from Categories", connection); 
// 创建 UpdateCommand 对 象 , 以便 更 新 数据 
dataAdpater. UpdateCommand = new SqlCommand( 
"update Categories set CategoryName = (@CategoryName " + 
"where CategoryID = @CategoryID", connection); 
dataAdpater. UpdateCommand. Parameters. Add( 
"@CategoryName", SqlDbType.NVarChar, 15, "CategoryName"); 
SqlParameter parameter = dataAdpater. UpdateCommand. Parameters. Add( 
"@CategoryID", SqlDbType. Int); 
// 检索 并 填充 数据 
DataTable categoryTable = new DataTable(); 
dataAdpater. Fill(categoryTable); 
// 更 新 数据 集中 的 数据 
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DataRow categoryRow = categoryTable.Rows[0]; 
categoryRow["CategoryName"] = "New Beverages"; 
// 将 数据 集中 的 更 新 保存 到 数据 源 

dataAdpater. Update( categoryTable); 


G.4 Entity Framework 基础 
》—》》 


在 ADO. NET 的 基础 上 还 可 以 选择 某 种 对 象 关 系 映射 技术 (ORM) 来 访问 数据 ,实体 
框架 (Entity Framework,EF) 就 是 一 种 典型 代表 。EF 使 开发 人 员 能 够 以 领域 对 象 和 属性 
(如 客户 和 客户 地 址 ) 的 形式 使 用 数据 ,而 不 必 考 虑 存储 这 些 数 据 的 基础 数据 库 表 和 字段 。 
借助 Entity Framework, 开 发 人 员 在 处 理 数据 时 能 够 以 更 高 的 抽象 级 别 工 作 , 并 且 能 够 以 
比 传统 应 用 程序 更 少 的 代码 创建 和 维护 面向 数据 的 应 用 。 


7.4.1 使 用 Entity Framework 访问 关系 数据 


实体 框架 是 一 种 对 象 关系 映射 机 制 , 它 能 够 弥补 面向 对 象 编程 环境 与 关系 数据 库 环 境 
之 间 的 差异 ,使 开发 人 员 通 过 熟悉 的 面向 对 象 技术 与 应 用 程序 的 概念 模型 进行 交互 ,只 要 对 
概念 模型 发 出 数据 访问 操作 ,实体 框架 就 会 将 该 操作 转换 为 关系 数据 库 操作 。 请 看 以 下 
示例 : 

例 7-7 连接 Blog 数据 库 , 查 询 所 有 的 版 块 及 各 版 块 下 的 帖子 。 

第 一 步 ; 建立 Blog 数据 库 。 

(1) 启动 Visual Studio, 选 择 “ 视 图 ”>“ 服 务 器 资源 管理 器 ”命令 。 

(2) 在 服务 器 资源 管理 器 中 右 击 “ 数 据 连接 ”, 选 择 “ 添 加 连接 ”。 

(3) 在 “更 改 数据 源 ” 对 话 框 中 选择 如 图 7-10(a) 所 示 的 数据 源 及 数据 提供 程序 , 单 击 
“确定 ”按钮 。 

(4) 在 “添加 连接 ”对 话 框 中 输入 服务 器 实例 名 称 ( 在 安装 Visual Studio 时 默认 安装 了 
SQL Server LocalDB 数据 库 , 其 默认 实例 名 为 (localdb)\MSSQLLOCALDB) ,身份 验证 选 
择 “ Windows 身份 验证 ”, 并 输入 Blog 作为 数据 库 名 称 , 如 图 7-10(b) 所 示 。 

(5) 单 击 "确定 ?按钮 ,并 在 弹出 的 对 话 框 中 选择 “是 "以便 创 建 数据 库 。 

(6) 在 服务 器 资源 管理 器 中 选中 新 建 的 数据 库 连接 ,然后 右 击 并 选择 “新 建 查询 "命令 
以 打开 查询 分 析 器 。 

(7) 在 查询 分 析 器 中 输入 以 下 SQL 建 库 脚本 : 








create table [dbo]. [Blogs] ( 

[BlogId] int identity (1, 1) not null, 

[Name] nvarchar (200) null, 

[Url] nvarchar (200) nol1l, 

constraint [PK_dbo. Blogs] primary key clustered ([BlogId] ASC) 
); 
create table [dbo]. [Posts] ( 
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[PostId] int identity (1, 1) not null, 

[Title] nvarchar (200) null, 

[Content] ntext null, 

[BlogId] int not null, 

constraint [PK_ dbo.Posts] primary key clustered ([PostId] asc), 


constraint [FK_dbo. Posts_dbo. Blogs_BlogId] foreign key ([BlogId]) peferences [dbo]. 


[Blogs] ([BlogId]) on delete cascade 
); 


insert into [dbo]. [Blogs] ([Name], [Url]) values ('The Visual Studio Blog', 'http://blogs. msdn. 


com/visualstudio/') 


insert into [dbo]. [Blogs] ([Name], [Ur1]) values ('. NET Framework Blog'，'http://blogs. msdn. 


com/dotnet/') 

insert into [dbo]. [Posts] ([Title], [BlogId]) values ('VS Post1', 1) 
insert into [dbo]. [Posts] ([Title], [BlogId]) values ('VS Post2', 1) 
insert into [dbo]. [Posts] ([Title], [BlogId]) values ('.NET Post1', 2) 
insert into [dbo]. [Posts] ([Title], [BlogId]) values ('.NET Post2', 2) 








[IF SQ Server MET fromewerk -| 


(a) 选择 数据 源 及 数据 提供 程序 
图 7-10 建立 Blog 数据 库 


(8) 

{OY 
示 表 数据 ? 即 可 查看 表 中 的 数据 。 

第 二 步 : 建立 应 用 程序 项 目 。 

(1) 在 Visual Studio 中 选择 "文件 ”新 建 ”项目 ”命令 ,打开 “新 


旧 
单 














(b) 选择 数据 库 实例 及 身份 验证 方式 


击 查询 分 析 器 左上 和 角 的 "执行 ”按钮 ,创建 Blogs 和 Posts 表 并 搬入 测试 数据 。 
击 打开 Blog 数据 库 连接 ,并 打开 “ 表 ”, 可 以 看 到 新 建 的 Blogs、Posts 表 , 选 择 * 显 


建 项 目 ” 对 话 框 。 














(2) 在 左 侧 的 项 目 模板 中 选择 Visual C# 一 Windows, 然 后 选择 “控制 台 应 用 ”。 


(3) 输入 项 目 名 称 "testEF1” ,并 选择 解决 方案 的 存储 位 置 ,最 后 单 训 

















“确定 ”按钮 创 到 
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该 项 目 。 

第 三 步 : 采用 反 向 工程 生成 数据 模型 。 

我 们 可 以 采用 . NET 框架 和 VS 工具 根据 数据 库 结 构 自 动 生成 领域 对 象 模型 ,也 可 以 
手工 写 代 码 创 建 模 型 。 

(1) 在 Visual Studio 中 选择 “项 目 ”>“ 添 加 新 项 ”命令 。 

(2) 在 左 侧 的 列表 中 选择 “数据 ,然后 在 右 侧 选择 “ADO. NET 实体 数据 模型 ”。 

(3) 输入 模型 名 称 “BlogContext”, 并 单 击 “添加 ”按钮 。 

(4) 在 弹出 的 “实体 数据 模型 向 导 ” 对 话 框 中 选择 “来 自 数据 库 的 Code First”, 单 击 “ 下 
一 步 " 按 钮 继续 。 

(5) 选择 要 连接 的 数据 库 实例 ,并 选中 “将 App. Config 中 的 连接 设置 另存 为 ” 复 选 框 ， 
如 图 7-11 所 示 , 单 击 “ 下 一 步 ” 按 钮 。 





























比 态 撞 广 生涯 和 二 全 全 下 后 基 过 专 所 六 9 并 第 条 起 90 在 全 |， 生 走 浅 广 入 意志 补 情 御 和 本 硬 右 访 而 志 全 民 
CT 
贡 ， 从 连 吾 字 行 淮 沾 扫 圳 铬 重 炊 息 、 我 崩 丰 让 周 入 冯 作 殉 沾 们 合并 江夏 .中 


天 在 放 天 从 丰 让 全 括 各 近 革 本 四 
连 久 字符 滋 : 
=Entiframework 





ecuriy=TrueMuhipleActiveResuhSets=TrueApp: 








图 7-11 “实体 数据 模型 向 导 ” 对 话 框 


(6) 在 弹出 的 对 话 框 中 选中 Blogs 和 Posts 表 , 单 击 “ 完 成 "按钮 ,系统 会 自动 为 这 两 张 
表 建 立 对 象 模型 。 

第 四 步 : 理解 . NET 框架 自动 生成 的 代码 。 

打开 解决 方案 资源 管理 器 ,可 以 看 到 系统 自动 生成 的 一 系列 文件 。 

(1) App. config: 这 是 应 用 程序 的 配置 文件 ,注意 观察 其 中 的 数据 库 连接 配置 。 





<connectionStrings> 
<add name = "BlogContext" 
connectionString = "data source = (localdb)\MSSQLLOCALDB; 
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initial catalog= Blog; 

integrated security = True; 

MultipleActiveResultSets = True; App = EntityFramework" 

providerName = "System. Data. SqlClient" /> 
</connectionStrings> 


(2) BlogContext. cs: 数据 访问 对 象 ,继承 自 DbContext 类 ,是 操作 数据 库 的 核心 对 象 。 
它 代表 一 个 数据 库 会 话 ,通过 它 实现 数据 查询 及 更 新 的 各 项 操作 。 


public partial class BlogContext : DbContext{ 
public BlogContext() : base("name= BlogContext") { } 
public virtual DbSet <Blogs > Blogs { get; set; } 
public virtual DbSet <Posts > Posts { get; set; } 
protected override void OnModelCreat ing(DbModelBuilder modelBuilder) 
{ 
) 


可 以 看 出 ,该 类 对 外 公开 了 Blogs 属性 和 Posts 属性 ,以 便 访问 Blogs 表 和 Posts 表 中 
的 数据 。 另 外 ,注意 在 DbContext 构造 器 中 传递 了 "name 王 BlogContext" 参 数 , 通 过 name 
参数 指定 访问 数据 库 的 连接 字符 串 ,该 字符 串 必 须 与 App. Config 文件 中 配置 的 连接 字符 
串 的 名 称 完 全 一 致 。 

(3) Blogs. cs: 代表 Blog 的 领域 对 象 ,核心 代码 如 下 。 


public partial class Blogs{ 

public Blogs(){ Posts = new HashSet <Posts>(); } 

[Key] 

public int BlogId { get; set; } 

[StringLength(200)] 

public string Name { get; set; } 

[StringLength(200)] 

public string Url { get; set; } 

public virtual ICollection <Posts> Posts { get; set; } 
b 


由 于 在 数据 库 中 指定 了 主键 ,字段 宽度 等 信息 ,在 模型 中 通过 注解 来 实现 这 些 约束 , 注 
意 [LKeyj]、LStringLength( ) ] 等 注解 格式 。 

考虑 到 Posts 与 Blogs 之 间 存在 外 键 约束 ,在 概念 模型 中 表现 为 Blogs 实体 与 Posts 实 
体 间 存在 一 对 多 的 关系 ,所 以 在 Blogs 类 中 定义 了 一 个 集合 对 象 Posts ,代表 隶属 于 该 Blog 
的 所 有 Post , 当 需 要 时 ,可 以 使 用 Posts 属性 访问 该 条 Blog 下 的 所 有 Posts。 

(4) Posts. cs: 代表 Post 的 领域 对 象 , 核 心 代码 如 下 。 


public partial class Posts{ 
[Key] 
public int PostId { get; set; } 
[StringLength(200)] 
public string Title { get; set; } 
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本 


[Column(TypeName = "ntext")] 

public string Content { get; set; } 

public int BlogId { get; set; } 

public virtual Blogs Blogs { get; set; } 
} 


注意 , 某 个 Post 对 象 必然 隶属 于 唯一 的 一 个 Blog 对 象 ,所 以 在 Posts 类 中 包含 了 唯一 
的 一 个 Blog 对 象 来 反映 这 种 关系 。 这 里 将 Blogs 属性 称 为 “导航 属性 ”, 也 就 是 在 Post 中 
通过 该 属性 可 以 访问 其 所 属 的 Blog 对 象 。 另 外 ,为 了 正确 反映 两 表 之 间 的 外 键 约束 ,并 方 
便 地 实现 连接 查询 ,外 键 BlogID 也 应 加 入 Posts 模型 中 。 

(5) Program. cs: 项 目的 启动 文件 ,核心 代码 如 下 。 














class Program { 
static void Main(string[ ] args) { } 
} 


这 里 的 Main 方法 作为 程序 运行 的 起 点 ,下 面 将 在 该 方法 中 编写 代码 ,实现 程序 的 基本 
功能 。 
第 五 步 : 使 用 实体 框架 访问 数据 库 。 
在 Main 方法 中 插入 以 下 代码 : 
using (var db = new BlogContext()){ 
List <Blogs> blogs; 
blogs = db.Blogs.Include("Posts").ToList(); 
Console. WriteLine("R11 blogs in the database:"); 
foreach (var item in blogs) { 
Console. WriteLine( item. Name); 
foreach (var post in item.Posts) { 
Console. WriteLine(post.Title) 
1 
Console. WriteLine("Press any key to exit..."); 


Console. ReadKey() ; 
} 


在 这 段 代码 中 首先 创建 了 一 个 BlogContext 类 型 的 对 象 db, 用 于 访问 所 创建 的 Blog 数 
据 库 ; 具体 如 何 连接 数据 库 ,如何 发 送 SQL 命令 ,如 何 接收 返回 结果 等 问题 ,用 户 一 概 无 须 
考虑 ,实体 框架 已 经 自动 完成 了 所 有 操作 ,并 将 数据 加 载 到 模型 对 象 中 ,用 户 需要 做 的 就 是 
从 模型 对 象 中 获取 现成 的 数据 ,构建 上 层 的 数据 库 应 用 。 

注意 ,在 BlogContext 中 定义 了 Blogs 和 Posts 属性 ,类 型 都 为 DbSet。 实 体 框架 从 数 
据 库 表 中 查询 到 的 数据 ,将 被 自动 序列 化 为 对 象 集合 ,保存 在 这 些 DbSet 类 型 的 属性 中 。 
使 用 db. Blogs 即 可 获得 Blogs 对 象 集 ,然后 可 以 使 用 foreach 循环 来 遍历 该 对 象 集 。 

我 们 希望 在 加 载 每 一 个 Blog 时 能 自动 加 载 属于 它 的 所 有 Post 对 象 , 有 两 种 方式 实现 ， 
一 是 在 遍历 Blogs 时 ,每 拿 到 一 个 Blog, 向 数据 库 发 送 一 次 查询 命令 ,查询 其 下 属 的 Posts; 
二 是 在 一 开始 查询 Blogs 时 就 使 用 连接 查询 ,同时 获取 所 有 的 Posts。 很 显然 ,第 二 种 方式 
的 效率 要 高 很 多 ,所 以 本 例 中 使 用 了 第 二 种 方式 ,db. Blogs. Include("Posts") 表 示 在 加 载 
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Blogs 时 使 用 连接 查询 加 载 所 有 的 Posts 子 对 象 。 
后 面 使 用 了 两 层 循环 来 遍历 数据 。 首 先 foreach (var item in blogs) 表 示人 遍历 Blogs 对 
象 集 , 每 次 获取 到 一 个 对 象 保存 到 item 变量 中 ; 


2 











foreach (var post in item. Posts) 表 示 针 对 
当前 的 Blog item 获取 其 关联 的 Posts 对 象 集 ,然后 遍历 该 对 象 集 ,每 次 获取 一 个 对 象 保存 
到 post 变量 中 。 


运行 该 程序 ,结果 如 图 7-12 所 示 。 





file:///G:/VS2015C/solutions/testEF1/testEF1/bin/Debug/testEFLEXE i 








图 7-12 程序 的 运行 结果 


可 以 看 出 ,使 用 实体 框架 开发 人 员 几 乎 不 需要 编 


x 





访问 数据 库 的 代码 ,系统 会 自动 根据 
数据 库 结 构 生 成 概念 模型 ,以 极 少 的 代码 量 实现 复杂 的 数据 访问 功能 。 


从 关系 数据 库 的 理论 来 看 关系 模型 分 为 概念 模型 . 迎 辑 模型 和 物理 模型 3 层 ,数据 库 管 
理 系统 关注 的 是 逻辑 模型 和 物理 模型 ,而 应 用 程序 关注 的 通常 是 概念 模型 ,这 就 需要 -种 机 
制 实现 概念 模型 到 数据 库 架 构 之 间 的 映射 ,实体 框架 实现 了 这 种 上 映射。 实体 框架 允许 用 户 
以 多 种 方式 定义 领域 对 象 ,这 些 对 象 反 映 了 概念 模型 中 的 实体 和 关系 ; | 
象 执行 各 项 操作 (例如 创建 \ 读 取 、 更 新 和 删除 ) ,实体 框架 会 跟踪 这 些 操作 
数据 库 的 等 效 操作 。 





用 户 可 以 对 这 些 对 
,并 将 其 转化 为 对 





7.4.2 基于 Entity Framework 的 几 种 开发 方式 


基于 实体 框架 可 以 采用 3 种 不 同 的 方式 开发 数据 库 应 用 , 即 Database First 方式 、 
Model First 方式 以 及 Code First 方式 ,如 图 7-13 所 示 。 
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Database 








or 











@ Existing Generated Data 
Database Model(classes) 

















图 7-13 基于 实体 框架 的 3 种 开发 方式 





1. Database First 方式 
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在 已 建 好 数据 库 的 情况 下 可 以 使 用 该 模式 ,借助 Visual Studio 中 集成 的 可 视 化 开发 工 
人 


有 具 ,根据 数据 库 结构 自 动 生 成 应 用 程序 中 的 实体 对 象 模型 。 数 据 库 的 逻辑 模型 .概念 模型 及 


之 间 的 映射 关系 会 定义 在 一 个 扩展 名 为 . edmx 的 XML 格式 的 文件 中 ,并 且 可 以 借助 可 
视 化 的 设计 工具 查看 并 编辑 该 模型 ,详情 参见 以 下 示例 : 














https://msdn.microsoft. com/en — us/library/jj206878(v= vs. 113).aspx 
2. Model First 方式 


如 果 尚 未 建立 数据 库 , 可 以 采用 这 种 开发 方式 。 首 先 使 用 可 视 化 设计 工具 来 设计 概念 
射 关系 。 详 情 请 参考 以 下 示例 : 


模型 并 保存 为 . edmx 文件 ,然后 借助 实体 框架 自动 生成 DDL( 数 据 定义 语言 ) 语 句 ,并 自动 


创建 数据 库 。 与 Database First 方式 一 样 ,. edmx 文件 中 存储 着 概念 模型 .逻辑 模型 及 其 映 


https://msdn.microsoft. com/en — us/library/jj205424(v= vs.113).aspx。 
3. Code First 方式 


不 管事 先 有 没有 建立 数据 库 都 可 以 抛 开 可 视 化 设计 工具 及 . edmx 文件 ,而 采用 手工 编 
码 的 方式 使 用 实体 框架 。 如 果 尚 未 建立 数据 库 , 可 以 先 创建 实体 类 ,然后 根据 实体 类 的 编码 
创建 数据 库 ; 如 果 已 经 建立 了 数据 库 ,也 可 以 根据 数据 库 结 构 自动 生成 实体 类 ; 而 概念 模 
型 和 好 和 辑 模型 之 间 的 映射 关系 可 以 通过 约定 的 方式 默认 生成 ,也 可 以 采用 特殊 的 API 来 指 
定 。 详 情 请 参考 以 下 两 个 示例 : 


https://msdn.microsoft. com/en — us/library/jj193542(v= vs.113) .aspx 


eH 


https://msdn.microsoft. com/en — us/library/jj200620(v= vs. 113).aspx 
时 上 








一 般 情况 下 建议 采用 Code First 方式 进行 开发 ,另外 两 种 方式 的 特点 是 使 用 了 可 视 化 
工具 ,但 是 在 使 用 前 要 考虑 清楚 ,如 果 以 后 数据 库 结 构 发 生变 化 如 何 进行 系统 升级 。 后 面 的 
都 将 以 Code First 开发 方式 举例 说 明 。 


7.4.3 概念 模型 设计 
在 采 














关系 通常 使 























Code First 方式 开发 时 第 一 步 要 定义 概念 模型 , 即 定义 实体 类 及 其 之 间 的 关系 ; 
第 二 步 要 定义 数据 访问 类 DbContext, 并 告诉 它 哪些 实体 类 需要 被 包含 在 模型 中 。 





在 关系 数据 库 设计 中 ,概念 模型 一 般 通 过 E-R 图 来 表达 ,E 即 实 体 ,R 即 实体 间 的 关系 。 
在 面向 对 象 程序 设计 中 ,实体 被 映射 为 领域 对 象 类 ,实体 属性 被 映射 为 类 的 
外 键 属性 及 导航 


属性 来 表达 。 请 看 以 下 示例 : 
public class SchoolContext : DbContext { 





属性 ,实体 间 的 
public DbSet < Department > Departments { get; set; } 
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public DbSet < Course > Courses { get; set; } 
} 
public class Department { 
public int DepartmentID { get; set; } 
public string Name { get; set; } 
public virtual ICollection < Course> Courses { get; set; } 
} 
public class Course { 
public int CourseID { get; set; } 
public string Title { get; set; } 
public int Credits { get; set; } 
public int DepartmentID { get; set; } 
public virtual Department Department { get; set; } 
} 
public partial class OnlineCourse : Course { 
public string URL { get; set; } 
j 
public partial class OnsiteCourse : Course { 
public string Location { get; set; } 
j 


该 例 中 定义 了 4 个 实体 , 即 Department( 院 系 ) Course( 课 程 ) ,以 及 从 Course 派生 出 
来 的 OnlineCourse( 在 线 课程 ) 和 OnsiteCourse (面授 课程 ); 对 Department 实体 定义 了 
DepartmentID 和 Name 两 个 属性 ,对 Course 实体 定义 了 CourseID Title 和 Credits3 个 属 
性 。 两 个 实体 间 存 在 一 对 多 的 关系 , 即 一 个 学 院 可 以 开设 多 门 课程 ,而 一 门 课程 只 能 由 一 个 
学 院 开设 ,这 种 关系 也 要 在 模型 中 表达 出 来 。 至 于 OnlineCourse 和 OnsiteCourse, 它 们 都 
继承 于 Course 类 ,所 以 具备 了 Course 类 的 所 有 属性 ,并 各 增加 了 一 项 自身 的 属性 。 

为 了 能 访问 概念 模型 中 的 实体 集 , 需 要 在 DbContext 中 为 各 实体 类 公开 DbSet 类 型 的 
属性 ,本 例 在 SchoolContext 中 定义 了 两 个 public 级 别 的 DbSet 类 型 的 全 

为 了 简化 编码 ,在 模型 定义 中 要 用 到 一 系列 约定 (Convention), 这 里 主要 介绍 3 种 
约定 。 

(1) 主键 约定 : 若 实 体 中 的 某 属性 名 称 为 ID( 不 区 分 大 小 写 ) 或 为 实体 类 名 十 ID, 则 该 
属性 将 默认 作为 实体 的 主键 。 

(2) 关系 约定 : 实体 间 的 关系 通过 导航 属性 进行 推断 。 本 例 在 Department 实体 中 定 
义 了 Courses 属性 ,是 Course 实体 的 集合 ; 而 在 Course 实体 中 定义 了 Department 属性 ,是 
Department 实体 的 实例 ,EF 由 此 推断 出 Department 和 Course 之 间 存 在 “一 对 多 ”的 关系 。 
对 于 “多 ”的 一 端 ,建议 将 另 一 端的 主键 也 加 进来 定义 为 属性 ,例如 本 例 在 Course 实体 中 还 
定义 了 DepartmentID 属性 ,很 明显 该 属性 将 被 推断 为 外 键 。 

(3) 类 型 发 现 约定 : 为 了 将 定义 的 实体 包含 到 概念 模型 中 ,需要 在 Context 中 为 其 定义 
DbSet 类 型 的 属性 ; 若 该 实体 引用 了 另 一 个 实体 , 则 EF 会 自动 将 被 引用 实体 也 加 入 到 模型 
中 ; 若 被 加 入 模型 的 实体 派生 出 了 新 的 实体 , 则 派生 出 的 实体 也 会 被 自动 加 入 到 模型 中 。 
本 例 可 以 仅 在 Context 中 定义 Departments 属性 ,将 Department 实体 包含 在 模型 中 ; 由 于 
Department 实体 引用 了 Course 实体 . 则 Course 会 被 自动 加 入 到 模型 中 ; 又 因为 Course 派 
生出 了 两 个 下 级 实体 ,所 以 实体 框架 会 自动 将 OnlineCourse 和 OnsiteCourse 也 加 入 到 模 
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在 概念 模型 中 还 有 很 多 内 容 很 难 由 约定 自行 推断 出 来 ,这 就 需要 在 代码 中 明确 指定 
户 可 以 使 用 注解 (Annotation) 和 和 链 式 API(Fluent API) 两 种 方式 来 指定 这 些 内 容 。 
例如 : 


型 中 












































public partial class Blogs{ 
[Key 
public int BlogNum { get; set; } 
[Index(IsUnique = true)] 
[StringLength(50)] 
public string Name { get; set; } 
[StringLength(200)] 
public string Url { get; set; } 





在 Blogs 实体 中 由 于 键 属性 的 名 称 不 是 ID 或 BlogID 的 形式 ,EF 无 法 根据 约定 推断 出 
主键 ,需要 专门 指定 ,所 以 对 BlogNum 属性 使 用 了 [Key] 注 解 ; 对 于 Name 属性 ,要 限定 其 
字段 长 度 为 50 ,并 为 其 建立 索引 ,所 以 使 用 了 [StringLengthb] 和 [Index] 两 个 注解 ; 对 于 Url 
属性 同样 使 用 了 [StringLengthj 注 解 。 

关于 注解 的 更 多 示例 ,请 参阅 以 下 文档 : 





https://msdn.microsoft. com/en — us/data/jj591583 
关于 使 用 链 式 API 的 方式 这 里 暂 不 介绍 ,请 参阅 以 下 两 个 文档 : 


https://msdn. microsoft. com/en — us/data/jj713564 
https://msdn.microsoft. com/en — us/data/jj591620 


7.4.4 DbContext 类 及 其 使 用 


实体 框架 将 实体 及 其 关系 映射 为 数据 库 中 的 关系 模式 ,其 关键 就 在 于 DbContext 类 
(System. Data. Entity. DbContext ,简称 Context) 。 该 类 在 运行 时 管理 实体 对 象 ,包括 从 数 
据 库 中 获取 数据 到 实体 对 象 ,跟踪 实体 对 象 状态 的 更 改 , 以 及 将 实体 对 象 的 更 改 持久 化 到 数 
据 库 中 。 

Context 类 的 使 用 方式 如 下 : 

(1) 定义 一 个 Context 类 ,继承 自 DbContext。 

(2) 在 Context 类 中 定义 一 系列 返回 值 类 型 为 DbSet 的 属性 来 代表 Context 中 的 特定 
实体 集合 ,而 这 些 实体 集合 又 会 对 应 到 数据 库 中 的 关系 集合 。 

如 果 使 用 Database First 或 Model First 方式 ,借助 可 视 化 工具 可 以 自动 生成 Context 
类 ; 如 果 使 用 Code First 方式 , 则 要 自己 书写 Context 代码 ,示例 如 下 : 
























































public class ProductContext : DbContext 
public DbSet < Category > Categories { get; set; } 
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public DbSet < Product > Products { get; set; } 
} 





设计 好 了 Context, 就 可 以 通过 这 些 实体 集 来 操纵 数据 了 。 访 问 某 DbSet 类 型 的 属性 
就 代表 着 查询 该 类 型 的 所 有 实体 ,但 应 注意 仅仅 访问 该 属性 并 不 会 立刻 执行 查询 ,而 是 要 在 
以 下 情况 下 才 真 正 触发 执行 : 

(1) 使 用 foreach 语句 来 枚 举 所 有 实体 对 象 时 。 

(2) 使 用 ToArray、ToDictionary 或 ToList 等 集合 操作 方法 来 转换 实体 对 象 时 。 

(3) 在 LINQ 查询 中 使 用 了 First、Any 等 操作 符 来 获取 数据 时 。 

(4) 在 DbSet 属性 上 调用 了 Load 方法 加 载 数据 时 。 

例如 : 





Var blogs = db.Blogs; 
foreach (var blog in blogs) { Console. WriteLine(blog. Name); } 
Var posts = db.Posts.ToList(); 


如 果 只 有 第 1 行 代码 , DbContext 还 不 会 连接 数据 库 获取 数据 ; 当 使 用 foreach 遍历 
Blogs 实体 集 时 ,DbContext 才 会 真正 获取 数据 。 第 3 行 代码 在 Posts 属性 上 调用 了 ToList 
方法 ,实体 框架 会 立刻 连接 数据 库 并 取 回 数据 。 

由 于 DbContext 对 象 要 占用 大 量 的 系统 资源 ,所 以 在 使 用 完成 后 要 注意 及 时 清理 。 
DbContext 类 实现 了 IDisposable 接口 ,这 使 得 它 可 以 被 自动 清除 ,方法 是 将 使 用 
DbContext 对 象 的 语句 块 包围 在 using 语句 块 中 ,这 样 系统 会 自动 构造 try-catch-finally 结 
构 , 保 证 不 管 在 正常 流程 还 是 出 现 异常 时 ,DbContext 使 用 的 所 有 资源 都 能 够 安全 释放 , 代 
人 码 框架 如 下 : 


using (var context = new DbContext()) { 
// 使 用 上 下 文 执行 数据 访问 


7.4.5 查询 并 检索 实体 


数据 访问 通常 包括 增 、 删 \ 改 、 查 4 项 操作 ,其 中 最 重要 的 是 查询 操作 。DbSet 类 实现 了 
IQueryable 接口 ,可 以 保存 查询 的 结果 ,查询 数据 库 及 对 象 实 例 化 的 过 程 由 实体 框架 自动 完 
成 。 如 果 要 从 DbContext 的 对 象 集中 检索 实体 对 象 ( 最 终 可 能 还 要 连接 数据 库 获 取 数 据 )， 
通常 要 使 用 LINQ(Language Integrated Query ,语言 集成 查询 ) ,请 看 以 下 示例 : 






































using (var context = new BloggingContext()) { 
// 查询 以 B 开 关 的 所 有 Blog 
var blogs = from b in context. Blogs 
where b. Name. StartsWith("B") 
select b; 


// 查询 名 为 ADO. NET Blog 的 Blog 对 像 
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Var blog = context. Blogs 
.Where(b => b. Name == "ADO. NET Blog") 
.FirstOrDefault(); 
} 


LINQ 是 . NET 为 C# 和 VB 语言 提供 的 一 种 新 特性 ,允许 开发 者 通过 高 级 语言 代码 来 
查询 数据 ,详情 请 查阅 以 下 文档 : 


https://msdn.microsoft. com/en — us/library/mt693024.aspx 


LINQ 表达 式 有 两 种 书写 方式 , 即 LINQ 查询 (LINQ Query) 方 式 以 及 链 式 API(Fluent 
API ) 方 式 。 本 例 中 第 一 部 分 使 用 了 LINQ 查询 ,第 二 部 分 使 用 了 链 式 API, 两 者 都 实现 了 
从 DbSet 中 检索 对 象 的 功能 。 

LINQ 查询 的 语法 和 SQL 语 名 类似, 区别 在 于 LINQ 查询 中 首先 出 现 的 是 from 子 句 ， 
用 于 指定 查询 的 主体 ,这 样 方便 Visual Studio 为 语句 的 后 续 部 分 提供 智能 提示 。 本 例 的 查 
询 语句 将 从 Blogs 对 象 集中 检索 所 有 名 字 以 “B”" 开 头 的 Blog 。 

链 式 API 允许 在 一 条 语句 中 以 调用 链 的 形式 调用 一 系列 方法 ,后 面 的 方法 都 在 前 一 个 
方法 返回 值 的 基础 上 进行 调用 。 本 例 第 二 个 查询 采用 了 链 式 API 的 形式 ,在 Blogs 对 象 集 
上 首先 调用 了 Where 方法 ,选择 所 有 名 字 为 ADO. NET Blog 的 对 象 集 返 回 , 在 该 返回 集合 
上 又 调用 了 FirstOrDefault 方法 返回 第 一 个 或 默认 的 一 个 对 象 。 

选择 LINQ 查询 方式 还 是 链 式 API 方式 完全 根据 用 户 的 习惯 而 定 , 也 可 以 根据 需要 混 
合 使 用 这 两 种 方式 。 用 户 在 使 用 链 式 API 时 需要 熟悉 Lambda 表达 式 。 

所 谓 Lambda 表达 式 实际 上 就 是 一 个 匿名 函数 ,形式 如 下 : 





(输入 参数 列表 ) = > 语句 或 语句 块 


其 中 ,“= 二 >” 被 称 为 “Lambda 运算 符 ”, 后 面 的 语句 块 作为 函数 体 ,输入 参数 列表 就 是 函 
数 的 形 参 ,这 样 结合 形 参与 函数 体 就 形成 了 完整 的 函数 定义 。 由 于 并 未 对 函数 命名 ,所 以 是 
匿名 函数 。 

例如 ,下 面 的 Lambda 表达 式 相当 于 定义 了 一 个 实现 加 法 运算 的 匿名 函数 。 


(x, y) =>{ returnx+y;} 


构造 Lambda 表达 式 的 目的 是 为 了 调用 它 ,在 调用 时 要 将 实 参 传递 给 形 参 ,请 看 以 下 
代码， 


context. Blogs. Where(b => b.Name == "ADO. NET Blog"); 











这 里 使 用 Where 扩展 方法 调用 了 Lambda 表达 式 , 含 义 为 将 Blogs 实体 集 作 为 实 参 ， 
传递 给 形 参 “b” ,检索 满足 条 件 “b. Name 二 一 "ADO. NET Blog" ”的 实体 子 集 。 后 面 还 有 
大 量 的 示例 要 使 用 Lambda 表达 式 , 请 大 家 自行 查阅 资料 ,深入 理解 Lambda 表达 式 的 
用 法 。 
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LINQ 基于 .NET Provider 模型 来 访问 数据 ,这 就 意味 着 同样 的 LINQ 代码 可 用 于 访 
问 不 同 的 数据 集合 。 在 . NET 框架 中 包含 了 5 种 LINQ 提供 程序 , 即 LINQ to Objects、 
LINQ to DataSet .LINQ to XML LINQ to SQL 以 及 LINQ to Entities, 所 以 LINQ 可 用 于 
查询 对 象 集 、 数 据 集 、XML、SQL 数据 库 以 及 实体 集 。 请 看 以 下 示例 : 
































string[ ] words = { "zero", "one", "two", "three", "four", "five" }; 
Var shortWords = words.Where(d =>d.Length<4); 
foreach (var w in shortWords){ Console. WriteLine("{0}", w); } 


该 例 第 一 行 构造 了 一 个 字符 串 数组 words 作为 对 象 集 ,第 二 行 在 该 对 象 集 上 进行 
LINQ 查询 ,查询 条 件 是 “字符 串 长 度 小 于 4”, 执 行 该 查询 的 返回 结果 也 是 一 个 对 象 集 ,所 以 
使 用 foreach 循环 遍历 并 打印 该 结果 集 。 

DbSet 本 身 为 实体 集 , 当 用 户 访问 Context 中 的 DbSet 属性 时 ,实体 框架 通常 会 自动 创 
建 一 个 到 数据 库 的 查询 ,但 该 查询 可 能 不 会 立刻 执行 ,而 是 在 用 户 真正 枚 举 或 定位 数据 时 执 
行 。 当 数据 库 查 询 结果 返回 时 ,实体 框架 自动 将 记录 集 转化 为 实体 集 , 并 附加 到 Context 下 
相应 的 DbSet 属性 中 。 

若 要 根据 键 属性 检索 实体 对 象 , 可 以 使 用 Find 方法 ,请 看 以 下 示例 : 





using (var context = new BlogContext()) { 
var blog = context. Blogs.Find(3); 
var blogAgain = context. Blogs.Find(3); 
由 


在 第 一 次 调用 Find 函数 时 ,系统 会 自动 创建 一 个 LINQ 查询 ,从 数据 库 中 检索 键 值 为 
3 的 记录 ,并 转化 为 实体 对 象 添加 到 Context 的 实体 集中 ; 而 当 第 二 次 检索 同一 个 对 象 时 ， 
由 于 Context 的 实体 集中 已 经 存在 了 该 对 象 的 实例 ,实体 框架 不 会 访问 数据 库 , 而 是 直接 返 
回 该 实例 。 


7.4.6 加 载 关 联 实体 


当 实 体 之 间 建 立 关 系 时 ,加载 一 个 实体 可 能 会 导致 同时 加 载 相 关联 的 实体 。EF 支持 
3 种 不 同 的 方式 来 加 载 关联 实体 , 即 提前 加 载 ,延迟 加 载 以 及 显 式 加 载 。 

(1) 提前 加 载 : 在 加 载 一 个 实体 时 同时 加 载 与 该 实体 相关 联 的 实体 数据 ,请 看 以 下 
示例 。 

using (var context = new BloggingContext()) { 


var blogs = context.Blogs. Include("Posts").ToList(); 
’ 


可 以 看 出 ,通过 调用 Include 扩展 方法 可 以 在 加 载 Blog 实体 的 同时 加 载 与 每 个 Blog 相 
关 的 Post 实体 。 

(2) 延迟 加 载 : 即 在 加 载 一 个 实体 时 暂 不 加 载 与 其 相关 联 的 实体 数据 ,而 只 有 在 第 一 
次 引用 这 些 被 关联 的 实体 数据 时 系统 才 自 动 加 载 ,请 看 以 下 示例 。 
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using (var db = new BlogContext()){ 
var blogs = db.Blogs.ToList(); 
foreach (var blog in blogs){ 
Console. WriteLine(blog. Name); 
foreach (var post in blog. Posts) { 
Console. WriteLine(post. Title); 


本 例 在 加 载 Blogs 时 并 未 使 用 Include 扩展 方法 ,所 以 系统 不 会 提前 为 每 个 Blog 对 象 
加 载 其 关联 的 Posts 列表 ; 而 在 第 一 层 循环 内 部 每 拿 到 一 个 blog 对 象 都 要 通过 blog. Posts 
访问 其 子 集 属性 ,这 时 系统 才 会 自动 加 载 该 blog 相关 的 Post 列表 。 

可 以 看 出 ,提前 加 载 只 向 数据 库 建立 一 次 连接 ,一 次 返回 所 有 数据 ; 而 延迟 加 载 只 有 在 
需要 子 表 数 据 时 才 一 次 次 连接 数据 库 返 回 部 分 数据 。 相 比 而 言 , 提 前 加 载 的 执行 效率 很 高 ， 
但 大 数据 量 时 会 占用 大 量 的 内 存 资源 ; 延迟 加 载 虽然 效率 不 高 ,但 占有 的 资源 很 少 , 两 者 各 
有 优势 。 

(3) 显 式 加 载 : 即 在 被 关联 实体 的 对 象 上 显 式 调 用 Load 方法 进行 加 载 ,请 看 以 下 
示例 : 

using (var context = new BlogContext()) { 

Var post = context.Posts.Find(2); 
context. Entry(post). Reference("Blog"). Load( ); 
var blog = context. Blogs.Find(1); 


context. Entry(blog).Collection("Posts").Load(); 


程序 的 上 半 部 分 先 定位 ID 为 2 的 post, 由 于 没有 使 用 Include 方法 指定 关联 对 象 ,在 
延迟 加 载 的 情况 下 不 会 自动 为 该 post 对 象 加 载 所 属 的 Blog ,需要 通过 明确 的 调用 来 加 载 。 
context, Entry(post) 在 Context 中 定位 当前 的 post 对 象 , 然 后 通过 Reference("Blog"). 
Load 方法 加 载 与 该 Post 关联 的 Blog 对 象 。 

程序 的 下 半 部 分 正好 相反 , 先 定 位 ID 为 1 的 Blog 对 象 ,然后 为 该 对 象 加 载 关 联 的 
Posts 集合 。 因 为 一 个 Blog 会 包含 多 个 Post, 所 以 使 用 了 Collection("Posts"). Load() 方 法 
进行 加 载 。 


7.4.7 实体 的 增 、 删 、 改 操作 


使 用 实体 框架 执行 增 、 删 \ 改 操作 比较 简单 ,只 需 先 对 DbContext 中 的 实体 对 象 执行 各 
项 操作 ,DbContext 会 自动 跟踪 各 项 更 改 , 当 最 后 在 DbContext 上 调用 SaveChanges 方法 
时 ,实体 框架 会 将 所 有 操作 持久 化 到 数据 库 中 。 请 看 以 下 示例 : 




















using (var context = new BlogContext()){ 
// 添加 一 个 Blog 实体 
Console. Write( "Enter a name for a new Blog: "); 
String name = Console. ReadLine(); 
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var blogl = new Blogs { Name = name }; 
context. Blogs. Add(blog1); 
// 删除 一 个 Blog 
context. Blogs. Remove( context. Blogs. Find(3)); 
// 更 改 一 个 Blog 
Var blog2 = context. Blogs.Find(2); 
blog2. Name = "Test Blog"; 
context. SaveChanges( ); 
foreach (var b in context. Blogs){ 
Console. WriteLine(b.BlogId + b. Name); 
l 
| 


该 示例 的 第 一 步 是 添加 一 个 Blog 实体 ,通过 键盘 接收 一 个 名 称 ,以 该 名 称 创建 Blog 对 
象 ,并 将 该 对 象 加 入 到 DbContext 中 的 Blogs 集合 ; 第 二 步 是 删除 一 个 Blog, 使 用 Find 方 
法 找到 ID 为 3 的 Blog 对 象 ,在 实体 集 上 调用 Remove 方法 将 其 删除 ; 第 三 步 是 更 改 一 个 
Blog ,使 用 Find 方法 先 定 位 到 一 个 实体 ,然后 修改 其 Name 属性 。 以 上 3 项 修改 实际 上 都 
是 在 本 地 的 模型 中 进行 ,尚未 影响 到 数据 库 。 第 四 步 在 DbContext 上 调用 SaveChanges 方 
法 ,这 样 实体 框架 才 会 将 所 有 修改 写 到 数据 库 , 完 成 数据 的 持久 化 操作 。 


.5 习题 和 上 机 练习 
SA 


1. 简 答 题 


(1) 列举 ADO.NET 体系 结构 中 的 常用 对 象 ,并 说 明 各 对 象 的 作用 。 

(2) 试 比较 DataReader 和 Dataset 对 象 的 异同 。 

(3) 在 ADO. NET 中 调用 存储 过 程 与 执行 SQL 命令 的 方法 有 什么 区 别 ? 

(4) 如 何在 Web. config 文件 中 保存 连接 字符 串 ,如 何在 程序 中 访问 该 字符 串 ? 

(5) 在 使 用 Command 对 象 操作 数据 库 时 ,分 别 说明 什 么 情况 下 应 调用 ExecuteReader() 
方法 、ExecuteScalar() 方 法 和 ExecuteNonQuery() 方 法 。 

(6) 试 举例 说 明 如 何人 遍历 DataTable 中 的 数据 。 

(7) 试 举例 说 明 如 何在 DataTable 中 按 主键 快速 检索 特定 行 的 数据 。 

(8) 什么 是 ORM, 它 的 作用 是 什么 ?7 列举 几 种 常用 的 ORM 框架 。 

(9) 采用 实体 框架 进行 数据 库 应 用 开发 时 ,有 哪 几 种 开发 方式 可 以 选择 ?如 何 选择 ? 

(10) 什么 是 ER 图 , 它 有 哪些 核心 要 素 ? 数据 库 设计 中 的 ER 图 如 何 映射 到 面向 对 象 
程序 中 的 类 和 对 象 ? 

(11) 什么 是 LINQ., 它 有 什么 作用 ,有 哪 几 种 书写 方式 ? 

(12) 在 实体 框架 中 ,加 载 关 联 实体 的 方式 有 哪 几 种 ? 如 何 选择 。 








2. 上 机 练习 





新 建 一 个 数据 库 test ,里 面 建 一 个 用 户 信 息 表 userinfo, 包 括 用 户 名 、 密 码 、 身 份 、 姓 名 、 
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性 别 、 


(1) 建立 一 个 注册 页 面 。 
户 注 册 信 息 并 单 击 “ 注 册 ” 按 钮 后 能 够 格式 化 显示 输入 的 注册 信息 (可 使 用 CSS 


电话 ,邮箱 等 信息 ,至 少 要 有 一 个 管理 员 身 份 的 用 户 。 












































输入 
文件 ) ,再 单 击 “确认 ?按钮 将 输入 信息 写 和 人 数据 表 userinfo 中 。 如 此 至 少 写 入 5 条 数据 。 
(2) 建立 一 个 登录 页 面 。 























击 “ 登 录 ” 按 钮 进行 身份 验证 ,如 果 正 确 则 进入 下 一 个 页 面 。 





输入 用 户 名 和 密码 后 间 








数据 绑 定 | 


几乎 所 有 的 Web 应 用 程序 都 要 和 数据 打交道 ,要 使 数据 方便 、 灵 活 地 显示 在 页 面 上 ,就 
需要 数据 绑 定 技术 。ASP. NET 提供 了 一 种 全 能 的 数据 绑 定 模型 ,允许 用 户 将 单个 数据 或 
数据 集合 绑 定 到 一 个 或 多 个 数据 绑 定 控件 上 ,由 控件 来 负责 数据 的 展示 ,这 样 用 户 就 无 须 耗 
时 编写 代码 ,通过 不 断 地 循环 读 取 记 录 和 字段 来 生成 显示 页 面 。 如 果 借助 ASP. NET 提供 
的 数据 源 控件 ,就 可 以 在 页 面 和 数据 源 之 间 定 义 一 个 声明 性 的 连接 ,甚至 不 用 写 一 行 代码 就 
可 以 配置 出 一 个 具有 数据 库 增 删改 , 查 功 能 的 复杂 页 面 。 


6.1 数据 绑 定 基础 
2 


数据 绑 定 就 是 把 数据 源 和 控件 相关 联 , 由 控件 负责 自动 显示 数据 的 一 种 方式 。 一 般 通 
过 声明 方式 将 数据 和 控件 关联 起 来 ,实现 自动 展示 ,而 不 是 通过 编写 代码 来 实现 展示 。 

ASP. NET 中 的 大 部 分 控件 (例如 Label、TextBox、Image 等 ) 都 支持 单 值 数据 绑 定 ,将 
控件 的 某 个 属性 绑 定 到 数据 源 , 进 而 自动 获取 数据 源 的 值 。 另 外 还 有 一 些 控件 支持 重复 值 
绑 定 ,也 就 是 说 它们 能 够 以 列表 或 表格 的 方式 呈现 出 一 组 项 目 ,然后 绑 定 到 一 个 数据 集合 
(例如 DataReader 或 DataTable) 上 ,最 后 自动 .重复 地 获取 集合 中 的 每 一 项 并 呈现 在 页 
面 上 。 


8.1.1 数据 绑 定 表 达 式 


在 ASP.NET 页 面 中 ,使 用 数据 绑 定 表达 式 可 以 输出 页 面 的 属性 值 . 成 员 变 量 值 或 函 
数 的 返回 值 ,前 提 是 这 些 属性 ,成 员 变 量 及 函数 具有 受 保护 的 (protected) 或 者 公有 的 
《public) 可 见 性 。 数 据 绑 定 表达 式 的 一 般 格式 如 下 : 





<%# data bind expression %> 


它 放置 在 .aspx 页 面 中 ,看 起 来 有 点 像 脚本 块 ,但 不 是 脚本 块 。 例 如 ,假设 页 面 中 定义 
了 一 个 叫 EmployeeName 的 public 或 protected 变量 , 则 使 用 以 下 数据 绑 定 表达 式 可 以 在 
页 面 上 输出 该 变量 的 值 。 


<%# EmployeeName %> 
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另外 还 可 以 使 用 计算 表达 式 来 构造 数据 绑 定 表达 式 , 例 如 : 


<%# getUserName( ) %> 
< 名 林 "Tom” + "Cat” %> 
<%# DateTime. Now %> 
< 外 村 Request. Url %> 








上 面 第 1 行 代 码 调用 了 getUserName 方 法 ,第 2 行 计 算 字符 串 表达 式 的 值 并 输出 ,第 3 
行 获取 当前 时 间 并 显示 ,第 4 行 获取 当前 页 面 的 URL 并 显示 。 


8.1.2 单 值 绑 定 


几乎 可 以 将 数据 绑 定 表达 式 放置 在 页 面 的 任何 地 方 ,但 通常 的 做 法 是 将 其 赋值 给 控件 
的 某 个 属性 ,例如 : 














<asp:Label ID = "lblUser" runat = "server" Text="<$% # CurrentUser %>"></asp:Label > 


为 了 计算 数据 绑 定 表达 式 的 值 , 必 须要 在 页 面 或 控件 上 调用 其 DataBind() 方 法 ,这 时 
ASP. NET 才 检 查 页 面 上 的 表达 式 并 用 适当 的 值 蔡 换 它们 , 若 忘记 调用 DataBind( ) 方 法 , 数 
据 绑 定 表达 式 将 不 会 被 十 和 人 值 ,在 页 面 呈 现时 将 被 丢弃 。 

例 8-1 使 用 数据 绑 定 表达 式 实现 单 值 绑 定 。 

首先 建立 以 下 测试 页 面 : 


<html xmlns = "http://www. w3. org/1999/xhtml" > 
<head runat = "server"><title > 测试 数据 绑 定 表达 式 </title></head> 
<body> 
<form id= "forml" runat = "server"> 
当前 时 间 : <% # DateTime. Now %><br /> 
当前 页 面 : <% # Request.Url %><br /> 
欢迎 你 : <asp:Label ID= "lblUser" runat ="server" Text = "< 多 井 CurrentUser %>"></asp: 
Label > 
<asp:Image ID = "imgUser" runat = "server" ImageUrl ="<%# getImg() %>" /> 
</form> 
</body > 
</html > 





该 页 面 中 调用 了 CurrentUser 属性 和 getImg() 方 法 ,这 需要 在 后 台 代 码 中 定义 ,如 下 : 














protected string CurrentUser { 
get { 
return "White"; 
| 

} 

protected string getImg() { 
return ". /img/user. png"; 


| 
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需要 注意 的 是 ,为 了 计算 并 显示 数据 表达 式 的 值 ,通常 在 页 面 的 Page_Load() 事 件 中 调 
Page 对 象 的 DataBind() 方 法 ,代码 如 下 : 























protected void Page Load(object sender, EventArgs e) { 
this. DataBind( ); 
. 


该 页 面 的 显示 效果 如 图 8-1 所 示 。 


[ED 
OO ee 


当前 时 间 ， 2014/8/22 9-52:03 
面 ， /localhost1061/Defaultaspx 





| 次 迎 你 ，Wwnae 





图 8-1 单 值 数据 绑 定 的 显示 效果 


8.1.3 重复 值 绑 定 


重复 值 绑 定 允许 用 户 将 一 个 列表 的 信息 绑 定 到 一 个 控件 上 ,列表 可 以 是 自 定 义 对 象 的 
集合 (例如 ArrayList 或 HashTable) ,也 可 以 是 行 的 集合 (例如 DataReader 或 DataTable) 。 

ASP. NET 带 有 几 个 支持 重复 值 绑 定 列表 控件 , 如 DropDownList、ListBox、 
CheckBoxList、,RadioButtonList、BulletedList 等 ,它们 具有 如 表 8-1 所 示 的 基本 属性 。 


表 8-1 列表 控件 的 基本 属性 


属 性 名 属性 描述 
DataSource 数据 源 对 象 , 包 含 要 显示 的 数据 ,通常 实现 ICollection 接口 
数据 源 对 象 的 ID, 可 以 链接 列表 控件 和 数据 源 控件 。 该 属性 与 DataSource 只 
能 设置 一 个 ,不 能 同时 使 用 
数据 源 中 可 以 包含 多 个 数据 项 ( 列 ), 但 列表 控件 只 能 显示 单个 列 的 值 ， 
DataTextField 属性 是 要 显示 在 页 面 上 的 字段 名 称 
该 属性 和 DataTextField 属性 类 似 , 但 从 数据 项 中 获得 的 数据 不 会 显示 在 页 面 
DataValueField 上 ,而 是 保存 在 底层 HTML 标签 的 Value 属性 上 ,允许 以 后 在 代码 中 读 取 该 
属性 值 。 该 属性 通常 用 于 保存 唯一 值 或 主键 
DataTextFormatString | 定义 一 个 可 选 的 字符 串 , 用 于 格式 化 DataTextField 的 值 








DataSourceID 





DataTextField 














将 列表 的 值 绑 定 到 列表 控件 上 通常 有 下 面 两 种 做 法 。 

(1) 编写 代码 进行 数据 绑 定 : 设置 列表 控件 的 DataSource 属性 为 集合 对 象 , 然 后 显 式 
调用 列表 控件 的 DataBind 方法 实现 数据 绑 定 。 

(2) 使 用 声明 的 方式 绑 定 : 设置 列表 控件 的 DataSourceID 属性 为 集合 对 象 , 这 样 不 需 
要 在 代码 中 调用 DataBind 方法 系统 就 会 自动 执行 数据 绑 定 。 

下 面 是 一 个 在 代码 中 进行 数据 绑 定 的 例子 ,声明 式 数据 绑 定 通常 要 配合 数据 源 控 件 使 




































































第 8 章 ”数据 绑 定 (2) 














,这 将 在 后 续 章 节 举 例 。 
例 8-2 ”建立 NorthWind 数据 库 的 按 类 别 查询 产品 信息 的 页 面 。 
运行 效果 如 图 8-2 所 示 。 
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图 8-2 按 类 别 查询 产品 信息 的 页 面 


该 页 面 中 使 用 列表 框 显示 并 选择 产品 类 别 , 查 询 该 类 别 的 产品 ,并 使 用 BulletedList 显 
示 所 有 产品 的 名 称 。 
页 面 加 载 事 件 的 代码 如 下 ,注意 其 中 的 加 粗 部 分 : 





protected void Page Load(object sender, EventArgs e){ 
if (!Page. IsPostBack) { 
using (SqlConnection conn = new SqlConnection(connstr)) { 
SqlCommand cmd = conn.CreateCommand(); 
cmd. CommandText = "select CategoryID, CategoryName from Categories"; 
conn. Open( ); 
SqlDataReader reader = cmd.ExecuteReader(); 
ddlcategory. DataSource = reader; 
ddlcategory. DataTextField = "CategoryName"; 
ddlcategory. DataValueField = "CategoryID"; 
ddlcategory. DataBind( ); 
} 
bindproducts( ); 
} 


为 了 将 DataReader 中 的 数据 绑 定 到 列表 框 , 需 要 设置 列表 框 的 DataSource 属性 为 
DataReader 对 象 ; 在 列表 框 中 要 显示 的 是 类 别名 (CategoryName) ,而 当选 择 项 改变 时 要 提 
交 给 服务 器 的 却 是 类 别 号 (CategoryID), 所 以 应 设置 列表 框 的 DataTextField 属性 为 
CategoryName,DataValueField 属性 为 CategoryID; 最 后 显 式 调用 列表 框 的 DataBind 方法 

根据 所 选 类 别 查询 产品 的 事件 过 程 代 码 如 下 : 








private void bindproducts() { 
string catid = ddlcategory.SelectedValue; 
using (SqlConnection conn = new SqlConnection(connstr)) { 
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SqlCommand cmd = conn.CreateCommand(); 
cmd. CommandText = "Select ProductName from Products where CategoryID = @catid"; 
cmd. Parameters. AddWithValue("(@catid", catid); 
conn. Open(); 
SqlDataReader reader = cmd. ExecuteReader(); 
bllproduct. DataSource = reader; 
bllproduct. DataTextField = "productname"; 
bllproduct. DataBind( ); 
b 
} 


这 里 将 查询 到 的 产品 名 称 绑 定 到 BulletedList 对 象 上 ,需要 设置 BulletedList 对 象 的 
DataSource 属性 及 DataTextField, 然 后 调用 其 DataBind 方法 。 


@.3 数据 源 控件 


在 前 面 的 童 节 中 学 习 了 通过 代码 访问 数据 库 的 方式 ,我 们 知道 了 如 何 连接 数据 库 ,执行 
查询 和 更 新 ,以 及 如 何 循环 遍历 记录 集 并 将 数据 显示 出 来 。 为 了 提高 开发 效率 ,还 可 以 使 用 
数据 源 控件 ,配合 数据 绑 定 控件 ,甚至 不 用 编写 代码 就 可 以 开发 出 功能 强大 的 数据 访问 程序 。 


8.2.1 数据 源 控件 概述 


下 面 通过 一 个 例子 来 理解 数据 源 控件 。 

例 8-3 使 用 数据 源 控件 和 数据 绑 定 控件 开发 一 个 员工 管理 的 应 用 程序 ,实现 员工 信 
息 的 查询 及 分 页 显示 .排序 等 功能 。 

请 按 以 下 步骤 进行 操作 : 

(1) 创建 一 个 Web Form 页 面 , 取 名 为 exam8_3. aspx。 

(2) 从 控件 工具 栏 的 “数据 ?选项 卡 中 选择 GridView 控件 ,将 其 加 入 到 当前 页 面 中 。 

(3) 从 GridView 控件 的 下 拉 菜单 中 选择 “新 建 数据 源 ” 选 项 ,如 图 8-3 所 示 。 














耳 电 本 
视图 W 项 目 (B) ”生成 (8) ”调试 (0) 格式 0) 素 (8) 工具 D 久 D(w) 





图 8-3 为 GridView 控件 新 建 数据 源 





(4) 打开 “数据 源 配置 向 导 ”, 如 图 8-4 所 示 , 要 求 用 户 选 择 数据 源 类 型 。 单 击 “ 数 据 
库 ” ,数据 源 ID 保持 默认 值 不 变 , 然 后 单 击 “ 确 定 ” 按 钮 进入 “配置 数据 源 ” 对 话 框 。 


所 寺 ==== En Ea 

















连接 到 ADO.NET 妆 持 的 任何 SQL 数据 亦 , 如 Microsoft SQL Server、Orade 或 OLEDB. 





图 8-4 数据 源 配置 向 导 


(5) 在 如 图 8-5 所 示 的 “配置 数据 源 ” 对 话 框 中 为 数据 源 指定 数据 库 连 接 。 若 前 面 已 经 
配置 过 数据 库 连接 , 则 可 以 从 下 拉 列 表 框 中 选择 合适 的 连接 ; 若 未 曾 配置 过 数据 库 连接 , 单 
击 “ 新 建 连接 ”按钮 ,打开 如 图 8-6 所 示 的 “添加 连接 ”对 话 框 进行 配置 。 

















图 8-5 “配置 数据 源 ”对话 框 
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(localdb)j\mssqllocaldb 
登录 到 服务 器 














用 户 儿 QD): | 


WD: | 


























图 8-6 “添加 连接 "对话 框 


(6) 在 “配置 数据 源 ” 对 话 框 中 单 击 “ 下 一 步 ” 按 钮 继续 ,系统 提示 “是 否 将 数据 库 连 接 保 
存 到 配置 文件 中 ?”, 选 中 “是 ”并 指定 连接 的 别名 , 则 系统 会 将 连接 字符 串 保 存 到 Web. 
config 文件 中 , 单 击 “ 下 一 步 ” 按 钮 ,打开 如 图 8-7 所 示 的 对 话 框 。 

(7) 这 一 步 为 数据 源 配置 检索 命令 ,有 两 种 方式 ,一 是 直接 指定 SQL 语句 或 存储 过 程 ; 
二 是 根据 用 户 的 选项 由 系统 自动 生成 SQL 语句 ,这 里 采用 后 一 种 方式 。 先 选中 “指定 来 自 
表 或 视图 的 列 " 单 选 按 钮 ,并 从 名 称 下 拉 框 中 选择 Employees 表 , 这 时 该 表 的 所 有 字段 会 在 
列表 框 中 显示 出 来 ; 选中 需要 的 字段 , 则 系统 自动 生成 Select 语句 并 在 下 方 的 文本 框 中 显 
示 出 来 。 如 果 需 要 ,可 以 继续 单 击 WHERE 按钮 ,生成 数据 过 滤 条 件 ,或 单 击 ORDER BY 
按钮 ,生成 数据 排序 子 句 。 

(8) 在 图 8-7 中 单 击 “ 下 一 步 ” 按 钮 ,打开 “测试 查询 ”对 话 框 ,可 以 测试 刚才 生成 的 SQL 
语句 的 执行 情况 , 单 击 “ 测 试 查询 ”按钮 ,可 以 看 到 从 库 中 提取 的 数据 显示 在 网 格 中 。 若 数据 
没有 问题 , 单 击 “ 完 成 ”按钮 结束 配置 向 导 。 可 以 看 到 ,GridView 已 自动 添加 了 从 数据 源 中 
获取 的 列 ,如 图 8-8 所 示 。 

(9) 当 在 GridView 任务 中 选中 “启用 分 页 ”“ 启 用 排序 ”等 复 选 框 时 ,可 以 看 到 
GridView 的 显示 样式 也 随 着 发 生变 化 。 若 用 户 觉得 GridView 的 网 格外 观 不 够 好 看 ,还 可 
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回 * 
EmployeelD 


贺 LastName 

辆 FirstName 

贺 Tile 

回 TileOfCourtesy 
| BirthDate 

回 HireDate 
Address 




















SELECT 语句 (U: 
SELECT [EmployeelD], [LastNamel [FirstName], [Tilel [Address], [PostalCode] FROM [Employees] 








图 8-7 “配置 Select 语句 ”对 话 框 





[sqlpatasourcel | 




















图 8-8 配置 GridView 的 特性 











性 


以 单 击 GridView 任务 中 的 “自动 套用 格式 ”来 改变 其 外 观 。 为 了 测试 分 页 效果 ,可 以 在 页 
面 源 代码 中 的 AllowPaging 二 "true" 后 面 添 加 一 条 PageSize 一 "5" 语 句 。 

至 此 所 有 的 配置 工作 已 经 完成 ,程序 可 以 运行 了 。 按 Ctrl 十 F5 组 合 键 启动 程序 ,运行 
效果 如 图 8-9 所 示 。 单 击 某 列 的 标题 , 则 自动 根据 该 列 排序 ; 单 击 页 面 底部 的 页 码 , 可 以 体 
验 分 页 显示 的 效果 。 不 用 任何 编码 程序 就 可 以 运行 ,这 就 是 数据 源 控件 和 数据 绑 定 技术 带 
来 的 巨大 便利 。 
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[0 EEAdauEn Title Address PostalCode 

1 Davolio ”Nancy Sales Representative 507 - 20th Ave. E Apt 2A 98122 

2 Fuller Andrew Vice President, Sales 908 W. Capital Way 98401 

3 Leverling Janet Sales Representative 722 Moss Bay Blvd. 98033 

4 Peacock Margaret Sales Representative 4110 Old Redmond Rd. 98052 

5 Buchanan Steven Sales Manager 14 Garrett Hill SW1 8JR 
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图 8-9 员工 管理 程序 的 运行 效果 


所 有 的 数据 源 控件 都 实现 了 IDataSource 接口 ,在 . NET 框架 中 主要 的 数据 源 控件 如 

表 8-2 所 示 。 
表 8-2 .NET 框架 中 主要 的 数据 源 控件 

控 件 名 作 “用 
支持 使 用 SqlClient、OleDb、Odbe 或 OracleClient 连接 的 任何 关系 数据 库 ,它们 都 
是 由 ADO. NET 提供 程序 连接 的 关系 数据 库 
多 层 体系 结构 中 的 中 间 层 对 象 。 较 复杂 的 应 用 程序 通常 将 表示 层 和 业务 层 分 
ObjectDataSource 开 , 并 在 业务 对 象 中 封装 处 理 逻 辑 ,ObjectDataSource 使 开发 人 员 能 够 在 n 层 体 
系 结构 的 应 用 程序 中 使 用 数据 源 控件 
AccessDataSource 使 用 Microsoft Access 数据 库 的 数据 源 控件 
向 数据 绑 定 控件 提供 XML 数据 的 数据 源 控件 ,通过 它 可 以 获取 分 层 数据 或 表 
格 数据 ,通常 用 于 显示 只 读 方案 中 的 分 层 XML 数据 
站 点 地 图 数据 的 数据 源 , 利 用 它 可 以 使 TreeView、Menu 等 控件 绑 定 到 分 层 的 站 
点 地 图 数据 





SqlDataSource 











XmlDataSource 





SiteMapDataSource 





8.2.2 SqlDataSource 控件 


使 用 SqlDataSource 控件 可 以 连接 到 任何 拥有 ADO. NET 数据 提供 程序 的 数据 源 , 包 
括 SQL Server、Oracle 以 及 基于 OLE DB 或 ODBC 的 数据 源 。 

SqlDataSource 会 根据 配置 自动 创建 Connection 对 象 .Command 对 象 和 DataReader 对 
象 等 ,以 完成 各 项 数据 访问 操作 ,这 就 需要 配置 一 系列 参数 ,主要 包括 数据 库 连 接 字符 串 、 数 
据 增 / 删 / 改 / 查 命令 及 各 种 命令 参数 等 。 


1. 配置 连接 字符 串 


数据 库 连 接 字 符 串 可 以 硬 编码 到 SqlDataSource 标记 中 ,但 推荐 的 方法 是 将 其 保存 在 
配置 文件 Web. config 中 ,然后 在 SqlDataSource 中 引用 。 例 如 Web. config 文件 配置 有 以 
下 的 连接 字符 串 : 











<connectionStrings> 
<add name = "connstr" connectionString = "Data Source = (localdb)\mssqllocaldb; 
Initial Catalog = northwind; Integrated Security = true" /> 
</connectionStrings > 
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<asp:SqlDataSource ConnectionString = "<% $ ConnectionStrings:connstr %>" . /> 


那么 ,在 SqlDataSource 标记 中 可 以 按 以 下 方式 引用 它 : 


2. 执行 查询 命令 














SqlDataSource 依靠 4 个 命令 对 象 实现 数据 库 的 增 、 删 \ 改 、 查 操作 ,其 命令 迎 辑 由 4 个 
属性 提供 , 即 SelectCommand InsertCommand、UpdateCommand 及 DeleteCommand ,它们 
都 接收 一 个 命令 字符 串 ,该 字符 串 既 可 以 是 SQL 语句 ,也 可 以 是 存储 过 程 的 名 字 , 这 由 其 对 
应 的 CommandType 属性 值 确定 (StoredProcedure 表示 存储 过 程 ,Text 表示 SQL 语句 ) 。 

下 面 是 一 个 完整 的 SqlDataSource 定义 , 它 可 以 从 Employees 表 中 读 取 数据 。 



































<asp:SqlDataSource ID = "dsEmployees" runat = "server" 
ConnectionString = "<% $ ConnectionStrings:connstr $%>" 
SelectCommand = "select EmployeeID, LastName, FirstName from Employees" 
</asp:SqlDataSource > 


数据 源 既 可 以 在 源 代码 视图 中 手工 建立 ,也 可 以 在 设计 视图 中 利用 向 导 来 建立 。 在 控 
件 工 具 栏 中 选择 SqlDataSource 控件 添加 到 页 面 上 ,然后 单 击 该 控件 ,从 智能 标记 中 选择 
“配置 数据 源 ”, 按 向 导 提 示 完 成 配置 ,系统 即 可 自动 生成 数据 源 的 代码 。 

在 各 个 命令 对 象 中 通常 都 要 使 用 命令 参数 以 提高 命令 的 灵活 性 ,请 看 以 下 示例 。 

例 8-4 根据 居住 地 查询 员工 的 基本 信息 。 

这 里 要 使 用 主 从 表 , 主 表 提 供 员 工 居住 地 信息 ,从 表 提 供 居住 在 某 地 的 员工 信息 。 这 样 
需要 定义 两 个 数据 源 ,一 个 提供 主 表 数 据 , 另 一 个 提供 从 表 数 据 。 

下 面 是 主 表 数据 源 的 定义 ， 

<asp:SqlDataSource ID = "dsCity" runat = "server" 

ConnectionString = "<% $ ConnectionStrings:connstr %>" 


SelectCommand = "select distinct city from Employees"> 
</asp:SqlDataSource > 


在 页 面 上 添加 一 个 下 拉 列 表 框 ddlCity, 使 用 dsCity 数据 源 填充 它 , 并 将 其 "自动 回 发 ” 
属性 设置 为 真 。 代 码 如 下 : 
<asp:DropDownList ID= "ddlCity" runat = "server" AutoPostBack = "true" 


DataSourceID = "dsCity" DataTextField= "city" DataValueField= "city"> 
</asp:DropDownList > 


当选 择 一 个 城市 后 需要 查询 居住 在 该 城市 的 所 有 员工 信息 ,这 通过 从 表 数 据 源 来 完成 ， 
下 面 是 它 的 定义 
<asp:SqlDataSource ID = "dsEmployee" runat = "server" 


ConnectionString = "<% $ ConnectionStrings:connstr $%>" 
SelectCommand = "select EmployeeID, LastName, FirstName, Title, City 
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from Employees where (City = @city)"> 
<SelectParameters> 


<asp:ControlParameter ControlID = "ddlCity" Name = "city" 


PropertyName = "SelectedValue" /> 
</SelectParameters> 


</asp:SqlDataSource> 


在 该 数据 源 中 使 用 了 命令 参数 (@city) 来 编写 查询 。 用 户 可 以 定义 多 个 参数 ,但 必须 
把 它们 都 映射 到 某 个 值 。 本 例 中 @city 参数 的 值 从 ddlCity 控件 的 SelectedValue 属性 获 
得 ,所 以 使 用 了 ControlParameter 参数 ,还 可 以 选择 从 QueryString、Session、Cookie、Form 
等 多 种 来 源 中 获取 参数 值 。 


最 后 在 页 面 上 添加 一 个 GridView 控件 来 显示 数据 源 dsEmployee 中 的 数据 ,代码 
如 下 : 























<asp:GridView ID = "gvEmployee" runat = "server" DataKeyNames = "EmployeeID" 
DataSourceID = "dsEmployee"> 
</asp:GridView> 


运行 程序 ,效果 如 图 8-10 所 示 。 
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图 8-10 根据 居住 地 查询 员工 信息 的 页 面 的 显示 效果 
3. 执行 更 新 命令 


SqlDataSource 还 支持 Insert、Update、Delete 等 数据 更 新 命令 的 执行 ,方法 是 定义 
InsertCommand、UpdateCommand 和 DeleteCommand。 下 面 的 示例 中 定义 了 一 个 可 更 新 
员工 信息 的 数据 源 。 


<asp:SqlDataSource ID = "dsEmployee" runat = "server" 
ConnectionString = "<% $ ConnectionStrings:NorthwindConnectionString %>" 
SelectCommand = "select EmployeeID, LastName, FirstName, Title, City from Employees" 
UpdateCommand = "update Employees set LastName = (@LastName, FirstName = (@FirstNanme, 


Title = @Title, City = @City WHERE (EmployeelD = @EmployeeID)"> 
</asp:SqlDataSource> 
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在 这 里 更 新 命令 中 的 参数 名 字 不 是 随便 起 的 ,而 是 和 查询 命令 中 指定 的 字段 名 相 一 致 ， 
只 在 前 面 加 上 了 @ 符 号 ,这 样 就 不 用 再 专门 定义 参数 了 。 

在 页 面 上 添加 一 个 GridView 控件 ,设置 其 数据 源 为 dsEmployee, 并 在 其 列 定 义 中 增加 
以 下 命令 列 ; 





<asp:CommandField ShowEditButton= "true" /> 
































这 样 网 格 中 将 出 现 一 个 编辑 列 , 单 击 某 行 的 “编辑 ”链接 后 可 以 对 该 行 数据 进行 更 改 ,如 
图 8-11 所 示 。 当 单 击 “ 更 新 "链接 时 GridView 会 自动 将 各 列 的 值 传递 给 DataSource, 从 而 
填充 UpdateCommand 的 各 个 参数 ,将 结果 保存 到 数据 库 。 

EmployeelD| LastName FirstName Title City 

更 新 取消 |1 |Davoho Nancy |Sales Representative Seattle 

此 组 2 Fuller IAndrew Vice President Sales __|Tacoma 

编辑 3 lLeverling Janet ‘Sales Representative Kirkland 

编 辐 4 Peacock Margaret Sales Representative “|Redmond 

上 蝙 辑 5 Buchanan Steven Sales Manager London 

纺 模 6 ISuyama Michael Sales Representative _lLondon 

编 强 7 IKing Robert ,Sales Representative __|London 

编辑 8 ‘Callahan Laura ‘Inside Sales Coordinator Seattle 

编辑 9 Jerry Mouse Sales Representative _lLondon 

Ei 11 Cat Tom 

















图 8-11 使 用 数据 源 更 新 数据 库 的 页 面 


使 用 数据 源 控件 执行 插入 、 删 除 操作 的 方法 与 更 新 操作 类 似 ,这 里 不 再 详细 说 明 。 
8.2.3 ObjectDataSource 控件 


使 用 SqlDataSource 控件 通常 可 以 节省 大 量 的 数据 访问 代码 ,但 它 牺牲 了 一 些 效率 和 
灵活 性 。 在 大 型 Web 应 用 中 通常 采用 nn 层 体系 结构 模式 ,页 面 中 不 会 硬 编码 SQL 语句 ,而 
是 调用 业务 层 或 数据 访问 层 对 象 的 方法 实现 数据 处 理 , 这 就 要 使 用 ObjectDataSource 来 获 
得 更 大 的 灵活 性 。 


1. 使 用 ObjectDataSource 执行 查询 


在 与 数据 打交道 时 推荐 的 做 法 是 将 数据 访问 逻辑 从 表示 层 分 离 出 来 ,形成 专门 的 数据 
访问 层 (简称 DAL) ,由 页 面 调用 数据 访问 层 对 象 来 操作 数据 库 ; 很 多 时 候 还 需要 在 表示 层 
和 数据 访问 层 之 间 再 增加 一 个 业务 层 , 负 责 处 理 核 心 的 业务 逻辑 ,这样 就 形成 了 三 层 体系 结 
构 。 在 多 层 体系 结构 中 ,各 层 之 间 通 常 使 用 业务 对 象 (也 叫 值 对 象 ,只 封装 业务 数据 ,不 进行 
数据 处 理 ) 来 传递 数据 。 在 这 种 应 用 场合 中 就 要 使 用 ObjectDataSource 来 连接 前 端的 表示 
层 与 后 端的 业务 层 或 数据 访问 层 。 

例 8-5 使 用 ObjectDataSource 控件 开发 查询 员工 信息 的 程序 。 

在 多 层 结构 的 应 用 程序 中 ,需要 先 定 义 业 务 对 象 类 和 数据 访问 类 。 这 些 类 通常 放 在 专 
门 的 类 库 项 目 中 定义 ,也 可 以 在 网 站 的 应 用 程序 代码 目录 下 定义 ,本 例 使 用 第 二 种 方式 。 右 
击 网 站 项 目 , 从 弹出 的 快捷 菜单 中 选择 “添加 ASP. NET 文件 夹 ”, 再 选择 APP_CODE , 即 可 
看 到 网 站 下 多 了 一 个 名 称 为 APP_CODE 的 文件 夹 , 后 面 就 在 该 文件 夹 下 建立 应 用 类 。 
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框 中 选择 “类 ”, 并 输入 类 名 “Employee”, 单 击 * 添 加 ”按钮 创 寻 


在 本 例 中 需要 先 定义 代表 员工 信息 的 业务 对 象 类 。 





右 玫 


代码 : 


ff APP_CODE 文件 夹 , 从 弹出 的 快捷 菜单 中 选择 “ 添 


public class Employee { 


private int empid; 
public int Empid { 

get { return empid; } 

set { empid = value; } 
1 
private string firstname; 
public string Firstname { 

get { return firstname; } 

set { firstname = value; } 
} 
private string lastname; 
public string Lastname { 

get { return lastname; } 





set { lastname = value; } 
由 
Private string city; 
public string City { 

get { return city; } 

set {city = value; } 





BB 


I 新 项 ”从 打开 的 “模板 ”对 话 


Employee 类 ,然后 输入 以 下 


可 以 看 出 ,在 业务 对 象 中 使 用 属性 封装 了 Employees 表 中 的 数据 。 
下 一 步 是 设计 数据 访问 层 对 象 , 其 基本 代码 框架 如 下 : 





public class EmployeeDB 


{ 


// 从 配置 文件 中 读 取 数据 库 连 接 字符 串 


string connstr = ConfigurationManager.ConnectionStrings["connstr"].ConnectionString; 


// 获取 所 有 员工 居住 的 城市 
public List< String> getcitys() { 
List<String> list = new List <String>(); 


using (SqlConnection conn = new SqlConnection(connstr)) { 


SqlCommand cmd = conn. CreateCommand( ) ; 


cmd. CommandText = "select distinct city from Employees"; 


conn. Open( ); 
SqlDataReader dr = cmd. ExecuteReader( ) ; 
while (dr.Read()) { 
list.Add(dr. GetString(0)); 
} 
! 
dr.Close( ); 
cmd. Dispose( ); 


return list; 

1 

// 获取 居住 在 某 城市 的 所 有 员工 的 信息 

public List <Employee > getemployeesbycity(string city) 
List <Employee> list = new List < Employee >(); 


{ 
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using (SqlConnection conn = new SqlConnection(connstr)) { 


SqlCommand cmd = conn. CreateCommand( ) ; 


cmd. CommandText = "select EmployeeID，LastName，FirstName，City 


from Employees where City = @city"; 
cmd. Parameters. AddWithValue("(@city", city); 
conn. Open( ); 
SqlDataReader dr = cmd. ExecuteReader(); 
while (dr. Read()) 
Employee emp = new Employee(); 
emp. Empid = dr.GetInt32(0); 
emp, Lastname = dr.GetString(1); 
emp. Firstname = dr.GetString(2); 
emp. City = dr.GetString(3); 
list. Add(emp); 
b 
dr. Close( ); 
cmd. Dispose(); 


return list; 

} 
// 根据 员工 号 获取 某 员工 的 基本 信息 
public Employee getemployee( int empid) { … } 
// 向 数据 库 中 插入 一 个 员工 的 信息 
public int insertemployee(Employee emp) { … } 
// 从 数据 库 中 删除 一 条 员工 的 信息 
public int deleteemployee( int empid) { … } 
// 将 员工 信息 的 更 改 保存 到 数据 库 中 





public int updateemployee ( int employeeID，string firstName, string lastName, string 


city) 
他 
} 


最 后 建立 表示 层 页 面 , 取 名 为 exam8_5. aspx。 


在 页 面 上 放置 一 个 ObjectDataSource 控件 , 取 名 为 dsCity。 单 击 dsCity 的 智能 标记 ， 





选择 “配置 数据 源 ”, 打 开 配 置 向 导 。 选 择 EmployeeDB 类 作为 





业务 对 象 ,再 选择 getcitys 








方法 作为 其 Select 操作 所 关联 的 方法 ,这 样 当 需要 数据 时 


, dsCity 控件 会 自动 构造 


EmployeeDB 对 象 , 并 调用 其 getcitys 方法 操作 数据 库 ,将 结果 以 List < String > 的 形式 


返回 。 


在 页 面 上 添加 一 个 下 拉 列 表 框 控件 , 取 名 为 ddlCity, 用 来 显示 城市 列表 。 从 ddlCity 的 
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智能 标记 中 选择 “配置 数据 源 ”, 并 选择 dsCity 作为 其 数据 源 , 这 时 运行 该 页 面 可 以 看 到 城 
市 下 拉 列 表 框 中 已 经 可 以 填充 数据 了 。 

再 向 页 面 上 添加 一 个 ObjectDataSource 控件 , 取 名 为 dsEmployee。 从 其 智能 标记 中 选 
择 “ 配 置 数据 源 ”, 打 开 配 置 向 导 。 第 一 步 是 选择 业务 对 象 , 如 图 8-12 所 示 , 从 下 拉 列 表 框 中 
选择 EmployeeDB。 单 击 * 下 一 步 ? 按 钮 进入 如 图 8-13 所 示 的 定义 数据 方法 界面 ,选择 
getemployeesbycity 方法 作为 其 数据 选择 方法 。 单 击 * 下 一 步 ? 按 钮 进入 如 图 8-14 所 示 的 定 
义 参 数 界面 ,在 这 里 要 为 getemployeesbycity 方法 中 的 参数 city 定义 数据 来 源 ; 选择 参数 
源 为 Control、ControlID 为 ddlCity , 单 击 “完成 ?按钮 保存 配置 。 


[getemployeesbycty(String cty) ,返回 Lst<Employee> 于 | 





8-13 定义 数据 方法 界面 
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EEE 





8-14 定义 参数 界面 


向 页 面 上 添加 一 个 GridView 控件 , 取 名 为 gvEmployees, 从 智能 标记 中 为 其 选择 数据 
源 为 dsEmployee。 最 后 将 ddlCity 控件 的 AutoPostBack 属性 设置 为 true, 至 此 一 个 简单 的 
多 层 结构 应 用 程序 已 开发 完成 ,可 以 实现 按 居住 城市 查询 员工 信息 的 业务 逻辑 。 


2. 使 用 ObjectDataSource 执行 更 新 操作 


和 SqlDataSource 控件 一 样 ,ObjectDataSource 也 提供 了 对 可 更 新 绑 定 的 支持 。 
首先 需要 为 ObjectDataSource 控件 指定 UpdateMethod ,以 调用 业务 类 中 的 更 新 方法 ， 
示例 代码 如 下 : 


<asp:0bjectDataSource ID = "dsEmployee" runat = "server" TypeName = "EmployeeDB" 
SelectMethod = "getemployeesbycity" UpdateMethod = "updateemployee" /> 


更 重要 的 是 ,UpdateMethod 方法 要 有 正确 的 方法 签名 。 由 于 更 新 、 择 入 、 删 除 操作 都 
要 自动 从 链接 的 数据 绑 定 控件 中 获取 参数 的 集合 ,所 以 这 些 参数 一 定 要 和 数据 访问 类 中 相 
应 的 方法 参数 相 匹配 ,包括 参数 的 数量 名 称 和 类 型 等 。 

例 8-6 为 例 8-5 增加 数据 更 新 的 功能 。 

(1) 为 业务 类 EmployeeDB 增加 更 新 员工 信息 的 方法 : 





public void updateemployee( int employeeid, string firstname, string lastname, string city) { 
using (SqlConnection conn = new SqlConnection(connstr)) { 
SqlCommand cmd = conn.CreateCommand(); 
cmd. CommandText = "update Employees set LastName = @last, FirstName = (@first, 
City = @city where EmployeelD = @id"; 
cmd. Parameters. AddWithValue("(@ id", employeeid); 
cmd. Parameters. AddWithValue("@1last", lastname); 
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cmd. Parameters.RddWithValue("@first"，firstname); 
cmd. Parameters. AddWithValue("@city", city); 
conn. Open( ); 
cmd. ExecuteNonQuery( ); 
cmd. Dispose( ); 
} 


(2) 为 数据 源 配置 数据 更 新 方法 : 从 dsEmployee 的 智能 标记 中 选择 “配置 数据 源 ”, 在 
定义 数据 方法 界面 中 为 Update 方法 选择 EmployeeDB 中 的 updateemployee() 方 法 ,如 
图 8-15 所 示 。 





[FEET 


用 





8-15 为 dsEmployee 配置 数据 更 新 方法 


查看 源 代码 可 以 看 到 ,系统 不 仅 为 dsEmployee 定义 了 UpdateMethod 属性 ,还 根据 
updateemployee 方法 的 原型 为 dsEmployee 定义 了 UpdateParameters 参数 集合 ,代码 如 下 ， 


<UpdateParameters > 
<asp:Parameter Name = "employeeid" Type = "Int32" /> 
<asp:Parameter Name = "firstname" Type = "String" /> 
<asp:Parameter Name = "lastname"” Type= "String" /> 
<asp:Parameter Name = "city" Type= "String" /> 
</UpdateParameters > 


(3) 为 GridView 控件 配置 编辑 功能 : 从 gvEmployee 的 智能 标记 中 选中 “启用 编辑 " 复 
选 框 ,可 以 看 到 网 格 控件 的 最 左 侧 增 加 了 编辑 列 。 

再 次 运行 程序 , 单 击 某 员工 左 侧 的 “编辑 ”按钮 进入 编辑 模式 ,更 改 数据 ,再 单 击 “ 更 新 ” 
按钮 ,可 以 看 到 更 改 内 容 已 经 保存 到 了 数据 库 。 

由 于 本 例 中 GridView 的 数据 来 自 于 Employee 的 集合 ,所 以 当 提 交 编 辑 时 GridView 会 
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为 Employee 类 中 的 每 个 属性 创建 一 个 参数 (包括 EmployeeID、FirstName、LastName 和 City)， 
并 将 这 些 参 数 加 入 到 ObjectDataSource 的 UpdateParameters 集合 。 接 着 dsEmployee 在 
EmployeeDB 类 中 查找 updateemployee 方法 去 执行 ,实现 数据 更 新 。 

可 以 看 出 ,UpdateMethod 方法 必须 具有 和 值 对 象 中 的 属性 名 字 完 全 相同 的 参数 。 例 
如 下 面 这 个 方法 是 匹配 的 : 





public void updateemployee( int employeeid, string firstname, string lastname, string city) 


而 下 面 的 方法 不 匹配 ,因为 参数 的 名 字 不 相同 : 


public void updateemployee( int id, string first，string last, string city) 


下 面 这 个 方法 也 不 匹配 ,因为 使 用 了 额外 的 参数 : 


public void updateemployee( int employeeid, string firstname, string lastname, string city, 
string title) 


方法 匹配 的 算法 不 区 分 大 小 写 ,并 且 不 考虑 参数 的 顺序 或 数据 类 型 ,只 是 寻找 具有 相同 
参数 个 数 以 及 参数 名 称 的 方法 。 只 要 有 这 样 的 方法 更 新 就 会 自动 提交 ,用 户 无 须 编写 额外 
的 代码 。 

如 果 要 使 用 ObjectDataSource 执行 Insert 或 Delete 操作 ,需要 配置 其 InsertMethod 和 
DeleteMethod ,并 且 在 业务 类 EmployeeDB 中 添加 对 应 的 方法 ,详细 操作 方法 请 参阅 
MSDN 文档 ,这 里 不 再 说 明 。 


6.3 数据 绑 定 控件 
qq 


ASP. NET 提供 了 几 个 功能 强大 的 数据 绑 定 控件 ,可 以 帮助 用 户 以 最 小 的 代码 量 来 实 
现 强大 的 数据 展示 、 编 辑 等 功能 ,前 面 用 过 的 GridView 控件 就 是 其 中 之 一 ,类 似 的 控件 还 
有 ListView DetailsView 和 FormView 等 。 


8.3.1 GridView 控件 








GridView 是 一 个 用 于 显示 数据 的 网 格 控 件 , 它 按照 表 的 行 显示 记录 ,同时 还 提供 了 很 
多 易 用 的 特性 ,包括 数据 分 页 ,排序 、 选 择 以 及 编辑 等 ,是 一 个 名 副 其 实 的 全 能 型 控件 。 使 
GridView 不 用 编写 代码 就 能 实现 很 多 常用 的 功能 ,但 这 样 又 会 损失 很 多 的 灵活 性 和 性 能 ， 
所 以 通常 要 对 GridView 进行 定制 及 编码 。 























， 





















































1. 为 GridView 定义 列 








使 用 GridView 最 简单 的 方法 是 将 其 AutoGenerateColumns 属性 设置 为 true, 这 样 系 
统 会 自动 从 数据 源 中 获取 表 的 架构 信息 ,并 按 各 字段 出 现 的 先后 顺序 依次 在 GridView 中 
为 所 有 字段 创建 列 。 这 样 做 显然 缺少 必要 的 灵活 性 ,例如 无 法 改变 列 的 显示 顺序 或 者 隐藏 
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部 分 列 。 


这 时 就 需要 将 AutoGenerateColumns 属性 设置 为 false, 并 在 GridView 的 
< Columns > 中 自 定 义 列 。 
表 8-3 是 GridView 支持 的 几 种 类 型 的 列 , 列 标签 





出 现 的 顺序 决定 了 列 的 显示 顺序 。 
表 8-3 GridView 中 使 用 的 列 的 类 型 























列 描 述 
BoundField 显示 数据 源 中 指定 字段 的 文本 
CheckBoxField 对 于 true/false 型 字段 创建 一 个 复 选 框 显示 其 状态 
ImageField 显示 二 进 制 字段 中 的 图 像 数 据 
ButtonField 为 列表 中 的 每 个 项 目 创 建 一 个 按钮 ,用 于 捕获 事件 编写 代码 





CommandField 


为 列表 中 的 每 个 项 目 提供 选择 、 编 辑 等 常用 功能 的 按钮 





HyperLinkField 





为 列表 中 的 每 个 项 目 创建 一 个 超 链接 ,并 在 链接 中 显示 指定 内 容 





TemplateField 


最 基本 的 列 类 型 是 BoundField, 它 绑 定 到 数据 对 象 的 某 个 字 


<asp:BoundField DataField = "EmployeeID" HeaderText = 





允许 自 定义 模板 来 显示 数据 或 创建 控件 ,为 开发 提供 最 大 的 灵活 性 
段 上 ,例如 : 


"ID" /> 


这 将 定义 一 个 绑 定 列 , 绑 定 到 数据 源 中 的 EmployeeID 数据 项 上 ,标题 行 显示 为 ID。 
在 创建 GridView 后 ,使 用 智能 标记 为 其 设置 数据 源 ,然后 单 击 “ 刷 新 架构 ”, 系统 会 自 


动 为 数据 源 中 的 所 有 数据 项 创建 绑 定 列 。 
题 .显示 顺序 等 细节 。 


例 


用 户 也 可 以 手工 修改 列 对 象 的 属性 来 调整 列 的 标 


如 , 当 不 想 显 示 某 列 时 ,可 将 其 Visible 属性 设置 为 false。 


在 绑 定 列 的 声明 中 可 以 使 用 表 8-4 中 的 常用 属性 。 


表 8-4 BoundField 中 的 常用 属性 


























属 性 描 述 
DataField 要 显示 的 数据 项 的 字段 名 或 属性 名 
DataFormatString 格式 化 字符 串 , 用 于 控制 本 列 中 数据 的 显示 格式 
HeaderText 设置 标题 行 要 显示 的 文本 
HeaderImageUrl 设置 标题 行 要 显示 的 图 像 
FooterText 设置 脚注 行 要 显示 的 文本 
SortExpress 排序 表达 式 ,用 于 执行 基于 该 列 的 排序 
ReadOnly 当 记 录 处 于 编辑 模式 时 该 列 是 否 允 许 修改 ,为 true 表示 不 允许 修改 
Visible 该 列 是 否 显 示 在 页 面 上 ,为 false 时 不 显示 








通过 DataFormatString 属性 可 以 设置 列 中 数据 的 显示 格式 ,这 对 日 期 型 及 数值 型 数据 








非常 有 用 





:例如 : 








<asp:BoundField DataField = "UnitPrice" HeaderText 


格式 化 字符 串通 常 由 
本 例 中 的 “0? 代 表 要 格式 化 的 值 ” 





所 示 。 





= "Price" DataFormatString = "{0:C}" /> 


oo 它们 被 包含 在 一 组 大 括号 中 。 


表示 采用 货币 格式 。 常 用 的 格式 化 字符 串 如 表 8-5 
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表 8-5 常用 的 格式 化 字符 串 
数据 类 型 | 格式 化 串 作 用 示 例 








{0:C} | 货币 格式 表示 $1 234. 50, 其 中 货币 符号 与 地 区 相关 
{0:E} | 科学 计数 法 表示 | 1.23450E 十 004 

















数值 型 {0:P} | 百分比 表示 45.6% 
对 于 123.4, 采 用 {0:F3) 格 式 化 为 123. 400, 而 采用 {0:F0} 格 
0:F \ 数 位 
{0:F?} | 固定 小 数位 数 趟 化 为 123 








{0:d} | 使 用 短 日 期 格式 | 具体 格式 取决 于 区 域 设置 中 的 短 日 期 格式 

{0:D} | 使 用 长 日 期 格式 | 具体 格式 取决 于 区 域 设 置 中 的 长 日 期 格式 

日 期 型 {0:s) | ISO 标准 格式 yyyy-MM-ddTHH:mm:ss, 例 如 2011-07-20T10:00:23 
{0:M} | 月 日 格式 MMMM dd, 例 如 January 20 

{0:G) | 一 般 格式 依赖 于 区 域 设置 ,例如 10/30/2011 10:00:23 AM 






































这 些 格式 化 字符 串 不 只 在 GridView 中 使 用 ,在 其 他 场合 也 可 以 使 用 。 

在 许多 应 用 场景 中 使 用 GridView 显示 概要 数据 列表 , 当 单 击 某 数据 项 时 导航 到 一 个 
新 页 面 显示 详细 数据 ,这 可 以 通过 使 用 HyperLinkField 列 实现 ,请 看 以 下 示例 。 

例 8-7 ”显示 员工 信息 列表 , 当 单 击 某 员工 时 导航 到 新 页 面 显示 详细 信息 。 

该 示例 需要 两 个 页 面 ,一 是 员工 概要 信息 浏览 页 面 ,二 是 员工 详细 信息 显示 页 面 。 

(1) 新 建 员工 信息 浏览 页 面 hlfieldexam. aspx, 并 为 其 配置 一 个 数据 源 ,代码 如 下 : 


<asp:SqlDataSource ID = "dsEmployee" runat = "server" 
ConnectionString = "<% $ ConnectionStrings :nwconnstr %>" 
SelectCommand = "select EmployeeID，LastName+ ' ' + FirstName as Name, City 
from Employees"> 
</asp:SqlDataSource > 


(2) 在 员工 信息 浏览 页 丙 洪 加 一 个 GridView 控件 , 取 名 为 gvEmployee, 并 在 智能 标记 

中 为 其 选择 数据 源 dsEmployee, 这 样 系统 会 自动 为 其 添加 3 个 绑 定 字段 ,分 别 是 
EmpbloyeeID .Name 和 City 。 

(3) 在 gvEmployee 的 智能 标记 中 选择 “编辑 列 ”, 打 开 “ 字 段 " 对 话 框 ,在 “ 选 定 的 字 

复 " 列 表 框 中 将 Name 比 定 列 误 挤 。 然后 在 “可 用 字 Be HyperLinkField, 单 

击 “* 添 加 ”按钮 ,将 其 添加 到 * 选 定 的 字段 "列表 框 中 ,并 调整 其 位 置 到 EmployeeID 字段 的 

下 面 。 

(4) 单 击 新 添加 的 HyperLinkField 字段 ,在 右 侧 的 “HyperLinkField 属性 ? 框 中 设置 其 

关键 属性 ,这 里 主要 有 3 个 属性 。 

。 DataTextField: 该 字段 要 显示 的 列 , 本 例 中 显示 用 户 名 ,所 以 设置 为 Name。 注 意 数 
据 源 中 将 FirstName 和 LastName 拼接 在 一 起 命名 为 Name。 

。 DataNavigateUrlFormatString: 设置 超 链接 的 URL 格式 ,本 例 中 单 击 超 链接 时 要 
导航 到 empDetail. aspx 页 面 , 同 时 要 传递 当前 员工 的 EmployeeID 字段 ,所 以 URL 
格式 为 “empDetail. aspx? id 二 {10)”。 这 里 使 用 “? id={0} ?来 传递 参数 。 

。 DataNavigateUrlFields: 设置 要 传递 的 参数 列表 ,本 例 中 只 传递 一 个 参数 , 即 
EmployeeID 列 的 值 , 所 以 该 属性 设置 为 EmployeeID 。 
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这 一 步 设置 完成 后 在 浏览 器 中 访问 该 页 面 , 运 行 效果 如 图 8-16 所 示 。 当 鼠标 指向 某 员 
工 姓名 时 在 状态 栏 中 能 看 到 超 链 接 指 向 的 URL 字符 串 , 只 是 单 击 该 链接 还 无 法 跳 转 到 指 
定 页 面 ,因为 还 没有 创建 员工 详细 信息 显示 页 面 。 












































































EmployeeID| | 
导 Davolio Nancy ”seattle | 
2 Fuller And ITacoma | 
3 Leverling Janet |Kirkland | 
4 Peacock Margaret Redmond| 
5 Buchanan Steven |London | 
6 Suyama Michael lLondon | 
7 King Robert London | 
8 Callahan Laura _ ISeattle 

9 Jerry Mouse London 

| hapyylocalhost-Detallaspxyid=1 


图 8-16 设置 完成 后 页 面 的 运行 效果 





(5) 创建 员工 详细 信息 显示 页 面 empDetail. aspx' 在 页 面 上 添加 一 个 数据 源 控件 ,声明 
如 下 : 


<asp:SqlDataSource ID = "dsEmployee" runat = "server" 

ConnectionString = "<% $ ConnectionStrings:nwconnstr %>" 

SelectCommand = " select EmployeeID, LastName, FirstName, Title, BirthDate, Address, 
City, Country, HomePhone from Employees where EmployeeID = @ID"> 

<SelectParameters > 

<asp:QueryStringParameter Name = "ID" QueryStringField= "id" /> 

</SelectParameters > 

</asp:SqlDataSource > 


该 控件 能 够 根据 QueryString 中 传人 的 ID 值 从 数据 库 中 查询 指定 员工 的 详细 信息 。 

(6) 向 用 户 详细 信息 页 面 添加 一 个 FormView 控件 ,设置 其 DataSourceID 属性 为 
dsEmployee 数据 源 ,系统 会 自动 根据 数据 源 中 的 架构 为 FormView 创建 显示 模板 。 

这 时 在 员工 信息 浏览 页 面 单 击 某 员工 的 姓名 就 可 以 导航 到 该 员工 的 详细 信息 页 面 ,如 
图 8-17 所 示 。 






































2. 对 GridView 排序 


GridView 控件 提供 了 内 置 排序 功能 ,无须 任 何 编码 。 

为 了 启用 排序 ,需要 设置 GridView 的 AllowSorting 属性 为 true, 并 为 每 个 可 排序 的 列 
定义 排序 表达 式 。 排 序 表达 式 一 般 使 用 SQL 查询 中 Order By 子 句 的 形式 ,每 个 字段 名 后 
还 可 加 上 ASC 或 DESC 以 限定 升序 或 降序 排列 。 请 看 如 下 示例 : 




















员工 详细 信息 - Mozilla Firefox 


EmployeelD: 1 

LastName: Davolio 

FirstName: Nancy 

Title: Sales Representative 
BirthDate: 1948-12-8 0:00:00 
Address: 507 - 20th Ave. E. Apt. 2A 
City: Seattle 

Country: USA 

HomePhone: (206) 555-9857 





图 8-17 员工 详细 信息 页 面 


<asp:GridView ID = "gvEmployee" runat = "server" AllowSorting = "true" 
AutoGenerateColumns = "false" DataKeyNames = "EmployeeID" DataSourceID = "dsEmployee" > 
<Columns > 
<asp: BoundField DataField = "FEmployeeID" HeaderText = "EmployeeID" 
InsertVisible = "false" ReadOnly = "true" SortExpression = "EmployeeID" /> 
<asp:BoundField DataField = "FirstName" HeaderText = "FirstName" 
SortExpression= "FirstName" /> 
<asp:BoundField DataField = "LastName" HeaderText = "LastName" 
SortExpression = "LastName" /> 
<asp:BoundField DataField = "Title" HeaderText = "Title" /> 
</Columns > 
</asp:GridView> 
<asp:SqlDataSource ID = "dsEmployee" runat = "server" 
ConnectionString = "<$% $ ConnectionStrings:nwconnstr %>" 
SelectCommand = "select EmployeeID, FirstName, LastName, Title from Employees"> 
</asp:SqlDataSource > 


该 页 面 的 运行 效果 如 图 8-18 所 示 。 由 于 EmployeeID 、FirstName、LastName 列 都 设 定 
了 排序 表达 式 , 所 以 这 些 列 的 标题 栏 表现 为 LinkButton 的 样式 。 当 单 击 某 标题 栏 时 ,表格 
中 的 数据 会 按 该 列 排序 显示 , 若 再 次 单 击 该 列 标题 , 则 会 按 相反 顺序 重新 排列 显示 。 

说 明 : 将 GridView 绑 定 到 数据 源 控件 并 在 智能 标记 中 为 GridView 启用 排序 后 ,系统 
会 自动 为 所 有 的 绑 定 列 启用 排序 ,并 自动 将 排序 表达 式 设 置 为 该 列 绑 定 的 DataField 属性 。 
若 想 使 某 列 不 可 排序 ,只 需 将 该 列 的 SortExpression 属性 值 清空 即 可 。 

在 一 般 情况 下 ,真正 实现 排序 逻辑 的 是 数据 源 控件 而 不 是 GridView 控件 。GridView 

是 展示 数据 ,并 提供 事件 编程 的 接口 ; 若 数据 源 支持 排序 ,GridView 就 可 以 直接 利用 它 ， 

但 若 数 据 源 不 支持 排序 ,用 户 也 可 以 捕获 GridView 的 Sorting 事件 并 自 定义 排序 方法 。 

并 非 所 有 的 数据 源 控件 都 支持 排序 ,例如 XmlDataSource 就 不 支持 ,而 SqlDataSource 
和 ObjectDataSource 支持 。SqlDataSource 默认 使 用 DataSet 架构 (而 不 是 DataReader) 保 
存 数据 ,这样 DataSet 中 的 每 个 DataTable 都 会 链接 到 一 个 DataView ,通过 DataView 可 对 
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乱 crdven 委 所 措 订 


mployeeID FirstName LastName 


Nancy Davolio 
And Fuller 








图 8-18 使 用 GridView 控件 排序 


数据 进行 排序 。 当 用 户 单 击 排序 列 的 标题 栏 时 , DataView 的 Sort 属性 就 被 设置 为 那个 列 
的 排序 表达 式 , 从 而 实现 排序 ,并 将 结果 绑 定 到 GridView 上 显示 。 


3. GridView 分 页 显示 


当 GridView 中 要 呈现 的 记录 数量 较 多 时 一 般 都 要 启用 分 页 。 
GridView 对 分 页 提供 内 建 的 支持 ,可 以 和 数据 源 控 件 配 合 使 用 实现 简单 的 分 页 ,也 可 
以 使 用 更 高 效 、 灵 活 的 方式 实现 自 定义 分 页 。 
GridView 提供 了 几 个 专 为 支持 分 页 设计 的 属性 。 
。 AllowPaging: 是 否 启用 绑 定 记录 的 分 页 ,默认 为 false。 
。 PageSize: 获取 或 设置 每 页 中 显示 的 记录 数 , 默 认为 10。 
。 PageIndex: 启用 分 页 时 获取 或 设置 当前 显示 页 的 索引 (从 0 开始 编号 ) 。 
。 PageSettings: 分 页 控件 的 设置 项 ,决定 了 分 页 控件 出 现 的 位 置 及 它们 包含 的 文本 、 
图 片 等 。 默 认 分 页 控件 显示 在 页 面 底部 ,显示 为 一 系列 数字 ,也 可 以 定制 为 显示 “上 
页 “下 页 "等 文字 的 按钮 或 图 片 按钮 。 
。 PageIndexChanging 事件 : 当 单 击 分 页 按钮 时 发 生 , 可 以 捕获 该 事件 以 定制 分 页 
代码 。 
如 果 要 使 用 自动 分 页 ,只 需 将 AllowPaging 属性 设置 为 true, 并 设置 PageSize 表示 每 
页 显示 的 行 数 。 例 如 : 








<asp:GridView ID = "gvEmployee" runat = "server" AllowPaging= "true" PageSize= "5" ... > 


自动 分 页 可 以 和 任何 实现 了 ICollection 接口 的 数据 源 一 起 使 用 。 使 用 DataSet 模式 的 
SqlDataSource 支持 自动 分 页 ,而 使 用 DataReader 模式 时 不 支持 。 

尽管 自动 分 页 非常 方便 ,但 却 存在 固有 缺陷 , 即 无 法 减少 数据 库 查询 的 数据 量 。 每 当 改 
变 页 码 时 都 需要 获取 所 有 满足 条 件 的 记录 ,然后 绑 定 指定 页 的 数据 ,并 将 其 余数 据 丢弃 ,这 
样 会 造成 数据 库 的 沉重 负荷 以 及 大 量 的 元 余数 据 传输 。 在 使 用 数据 源 控件 时 缓存 机 制 会 大 
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成 千 上 万 条 记录 也 会 消耗 大 





互 


幅度 提高 自动 分 页 的 性 能 ,减少 连接 数据 库 的 次 数 ; 但 若 返 
量 的 内 存 , 这 时 就 应 考虑 使 用 自 定义 分 页 。 

自 定 义 分 页 需要 编程 获取 指定 页 的 数据 并 绑 定 到 GridView。 用 户 既 可 以 使 
ADO. NET 数据 提供 程序 访问 数据 库 , 也 可 以 定制 ObjectDataSource 访问 数据 库 。 在 使 
ObjectDataSource 时 ,首先 要 设置 其 EnablePaging 属性 为 true, 然 后 还 要 设置 其 
StartRowIndexParameterName、MaximumRowsParameterName、SelectCountMethod 属 性 ， 
请 看 以 下 示例 。 

例 8-8 列表 显示 员工 的 基本 信息 ,每 页 显示 5 条 记录 。 

(1) 开发 数据 访问 类 : 在 自 定义 分 页 时 必须 要 有 专门 的 方法 计算 记录 总 数 ,以 确定 总 
的 页 码 范围 ,另外 还 要 有 方法 能 够 提取 指定 的 几 条 记录 ,这 两 项 任务 都 要 由 数据 访问 类 来 实 
现 。 代 码 如 下 : 



















































































// 计算 数据 表 中 记录 的 总 条 数 
public int countemployees() { 
int cnt = 0; 
using (SqlConnection conn = new SqlConnection(connstr)) { 
SqlCommand cmd = conn. CreateCommand( ) 
cmd, CommandText = "select Count(EmployeeID) from Employees "; 
conn. Open( ) ; 
cnt = (int)cmd. ExecuteScalar(); 
cmd. Dispose( ); 
由 
return cnt; 
) 
// 从 数据 库 中 查询 指定 页 的 记录 ,start 为 起 始 记录 号 .count 为 每 页 记录 数 
public List < Employee > getemployees( int start, int count) { 
List < Employee> list = new List <FEmployee >(); 
using (SqlConnection conn = new SqlConnection(connstr)) { 
SqlCommand cmd = conn.CreateCommand(); 
cmd.CommandText = "select EmployeelID, LastName, FirstName, Title from " 
+ "( select EmployeeID, LastName, FirstName, Title, " 
+ "ROW_ NUMBER() over(order by EmployeeID) as RowNum from Employees ) as emps " 
+ "where RowNum between (@start and @end"; 
cmd. Parameters. AddWithValue("@start", start); 
cmd. Parameters. AddWithValue("(@end", start + count); 
conn. Open(); 
SqlDataReader dr = cmd.ExecuteReader(); 
while (dr.Read()) { 
Employee emp = new Employee(); 
emp. Employeeid = dr.GetInt32(0); 
emp. Lastname = dr.GetString(1); 
emp. Firstname = dr.GetString(2); 
emp.City = dr.GetString(3); 
list. Add(emp); 
. 
dr.Close(); 
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cmd. Dispose(); 
: 


return list; 


} 


检索 数据 的 方法 中 使 用 了 比较 复杂 的 SQL 语句 ,在 子 查询 中 使 用 ROW_NUMBER 函 
数 为 每 一 条 满足 条 件 的 记录 生成 行 号 ,然后 在 主 查 询 中 根据 行 号 检索 连续 的 几 条 记录 。 

说 明 : ROW_NUMBER 函数 为 SQL Server 2005 中 新 增 的 函数 ,在 低 版 本 的 SQL 
Server 中 无 法 使 用 。 

(2) 声明 ObjectDataSource 数据 源 ,代码 如 下 : 


<asp:0bjectDataSource ID = "dsEmployee" runat = "server" TypeName = "EmployeeDB" 
EnablePaging = "true" SelectCountMethod = "countemployees" SelectMethod = "getemployees" 
MaximumRowsParameterName = "count" StartRowIndexParameterName = "start"> 
</asp:ObjectDataSource > 


这 里 使 用 SelectCountMethod 属性 指定 了 计算 记录 总 数 的 方法 ,通过 SelectMethod 属 
性 指定 了 检索 数据 的 方法 ,最 后 两 个 属性 为 检索 方法 提供 起 始 记录 号 和 该 页 的 记录 数 。 
(3) 创建 GridView 对 象 ,设置 其 数据 源 为 i dsEmployee, 并 启用 分 页 。 代 码 如 下 : 





<asp:GridView ID = "gvEmployee" runat = "server" AllowPaging= "true" PageSize= "5" 
DataSourceID = "dsEmployee”… > 
</asp:GridView> 


运行 程序 ,可 以 看 到 如 图 8-19 所 示 的 页 面 效果 。 


自 定义 分 页 - Windo" 


GO DE TE Sl | 


Margaret Peacock SalesRepresentative 
Steven 。 Buchanan Sales Manager 








图 8-19 使 用 GridView 控件 建立 分 页 


4. 在 GridView 中 处 理 行 数 据 




















户 经 常 要 在 GridView 中 选择 某 一 行 ,然后 对 该 行 的 数据 进行 处 理 。 如 果 要 实现 这 
样 的 功能 需要 做 两 方面 的 工作 ,一 是 在 GridView 中 创建 命令 列 或 按钮 列 以 触发 行事 件 ; 二 
是 捕获 特定 的 事件 ,在 事件 过 程 中 编写 代码 进行 数据 处 理 。 
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ButtonField 是 一 种 通用 的 按钮 列 ,可 在 GridView 中 创建 一 列 普通 的 按钮 对 象 , 所 有 按 
钮 共用 同一 个 命令 名 (由 其 CommandName 属性 指定 ) ,用 于 指定 当 该 按钮 被 按 下 时 将 执行 
的 命令 。 针 对 GridView 的 行 ,通常 可 以 执行 以 下 命令 。 

。 Delete: 删除 一 行 数据 。 

。 Edit: 编辑 一 行 数 据 。 

。 Update: 使 用 更 改 的 数据 执行 更 新 。 

。 Cancel: 放弃 更 改 的 数据 。 

。 Select: 选择 一 行 数据 。 

当 单 击 ButtonField 中 的 某 个 按钮 时 将 触发 RowCommand 事件 ,开发 人 员 可 以 在 该 事 
件 中 编写 代码 ,获取 命令 名 ,并 根据 命令 执行 相应 的 操作 。 当 命令 名 为 以 上 5 条 命令 之 一 时 
将 引发 相应 的 内 置 事件 ,包括 RowDeleting、 RowDeleted、 RowEditing、RowUpdating、 
RowUpdated、RowCancelingEdit 、SelectedJIndexChanging、SelectedIndexChanged 等 ,要 处 
理 该 命令 ,可 以 选择 更 合适 的 事件 过 程 来 编写 代码 ,而 不 必 选 择 通用 的 RowCommand 事件 

为 了 简化 编程 ,GridView 还 提供 了 CommandField 列 , 它 包含 了 上 面 列 出 的 5 条 常用 
命令 。 在 创建 CommandField 列 时 可 以 从 3 组 常用 命令 中 选择 一 种 , 即 编辑 、 更 新 、 取 消 命 
令 , 选 择 命令 ,删除 命令 。 

对 于 ButtonField 和 CommandField ,其 按钮 都 有 3 种 样式 供用 户 选 择 ,分 别 是 Button 
样式 (传统 的 按钮 形状 ) 、Link 样式 ( 超 链接 的 形式 ) 和 Image 样式 (图 片 按 钮 ), 用 户 可 以 通 
过 ButtonType 属性 进行 设置 。 

下 面 通过 几 个 示例 说 明 如 何在 GridView 中 处 理 行 数据 。 

例 8-9 显示 员工 列表 ,当选 择 某 员工 时 在 列表 下 方 显示 其 所 有 的 订单 。 

本 例 需 要 创建 两 个 GridView ,一 个 显示 员工 列表 , 另 一 个 显示 订单 列表 。 在 第 一 个 网 
格 上 捕获 行 选择 事件 ,然后 根据 所 选 行 的 EmployeeID 在 Order 表 中 查询 订单 信息 并 绑 定 
到 第 二 个 网 格 上 显示 。 

(1) 创建 SelectCMD. aspx 页 面 ,添加 一 个 数据 源 控件 以 检索 员工 信息 ,志明 如 下 : 









































<asp:SqlDataSource ID = "dsEmployee" runat = "server" 

ConnectionString = "<% $ ConnectionStrings:nwconnstr %>" 

SelectCommand = "select EmployeeID, LastName, FirstName, Title from Employees" > 
</asp:SqlDataSource> 














(2) 创建 第 一 个 网 格 控件 ,命名 为 gvEmployee, 设 置 其 数据 源 为 dsEmployee, 系 统 自动 

为 其 创建 几 个 绑 定 列 。 再 创建 第 二 个 网 格 控件 ,命名 为 gvOrder。 
(3) 从 gvEmployee 的 智能 标记 中 选择 “编辑 列 ”, 打 开 如 图 8-20 所 示 的 对 话 框 , 在 “可 

字段 ”列表 框 中 选择 CommandField 下 的 “选择 ”项 ,然后 单 击 “ 添 加 ”按钮 ,将 创建 一 个 
CommandName 属性 为 Select 的 命令 列 。 移 动 该 列 到 合适 的 位 置 ,设置 其 HeaderText 属 
性 为 “查询 订单 ”。 

这 时 浏览 该 页 面 可 以 看 到 GridView 最 左 侧 的 命令 列 ,但 单 击 “ 选 择 ” 链 接 时 没有 反应 ， 
这 是 因为 还 没有 处 理 它 的 行 选择 事件 。 

































































262 Asp .NET web 应 用 开发 技术 ( 第 2 版 ) 

















图 8-20 使 用 命令 列 





(4) 选择 gvEmployee 控件 ,在 属性 窗口 中 单 击 * 事 件 ? 图 标 , 从 其 内 午 事 件 列表 中 选择 
gvEmployee_SelectedIndexChanged 事件 (该 事件 将 在 GridView 中 选择 某 行 数据 时 被 触 
发 ) ,然后 双击 建立 该 事件 过 程 ,如 图 8-21 所 示 。 

















8-21 建立 SelectedIndexChanged 事件 过 程 


(5) 在 打开 的 代码 窗口 中 建立 以 下 事件 过 程 代码 : 


protected void gvEmployee_SelectedIndexChanged(object sender, EventArgs e) { 
int id = (int)gvEmployee. SelectedDataKey. Value; 
using (SqlConnection conn = new SqlConnection(connstr)) { 
SqlCommand cmd = conn. CreateCommand( ) ; 
cmd. CommandText = "select OrderID, CustomerID, OrderDate 
from Orders where EmployeeID = (@EID"; 
cmd. Parameters. AddWithValue("@EID", id); 
conn. Open( ); 
SqlDataReader dr = cmd.ExecuteReader(); 
gvOrder. DataSource = dr 
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gvOrder. DataBind( ); 


再 次 运行 程序 , 单 击 某 员工 前 面 的 “选择 ”链接 ,该 员工 的 订单 能 够 列表 显示 出 来 ,如 
图 8-22 所 示 。 





在 Gridview 中 园 择 行 并 显示 子 表 数 舌 - Windows Internet Explorer 了 


OMe ror a ll oa 








及 隐 区 区 区 说 计 谨 车 世 





10258 ERNSH 1996-7-17 0:00:00 
10270 WARTH 1996-8-1 0:00:00 
10275 MAGAA 1996-8-70:00:00 
10285 QUICK 1996-8-20 0:00:00 
10292 TRADH 1996-8-28 0:00:00 





图 8-22 员工 的 订单 


在 SelectedIndexChanged 事件 中 最 关键 的 一 步 是 获取 所 选 员 工 的 ID 号 ,这 可 通过 两 种 
方式 实现 。 

方式 1: 若 在 gvEmployee 中 设置 EmployeeID 列 为 主键 列 , 则 可 以 在 当前 行 的 主键 中 
取得 EmployeeID。 代 码 如 下 : 





int id = (int)gvEmployee.SelectedDataKey. Value; 
或 
int id = (int)gvEmployee.SelectedDataKey. Values[0]; 


由 于 关系 表 中 通常 可 以 有 几 个 字段 联合 做 主键 ,所 以 当前 选择 行 的 主键 应 该 是 多 个 字 
段 值 的 集合 ,上 面 两 种 方式 都 是 从 这 个 值 集合 中 取出 索引 0 位 置 的 值 返 回 。 
方式 2: 对 于 非 主键 列 ,可 以 从 当前 选择 行 的 指定 单元 格 中 获取 值 。 代 码 如 下 : 


string eid = gvEmployee. SelectedRow.Cells[1].Text; 








使 用 SelectedRow 属性 可 以 获得 网 格 中 的 当前 选 定 行 ,该 行 由 多 个 单元 格 组 成 ,使 用 
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Cells 属性 访问 单元 格 集合 ,指定 要 访问 的 单元 格 序号 (从 0 开始 编号 ) 即 可 定位 到 指定 单元 
格 ,最 后 通过 Text 属性 得 到 该 单元 格 的 数据 。 

例 8-10 手工 编写 代码 ,实现 员工 信息 的 编辑 操作 。 

在 前 面 的 示例 中 多 使 用 数据 源 控件 ,可 以 不 用 编写 代码 就 实现 很 多 功能 。 但 是 为 了 取 
得 更 好 的 性 能 和 灵活 性 ,往往 会 使 用 ADO. NET 数据 提供 程序 定制 代码 。 

(1) 创建 EditEmployee. aspx 页 面 并 添加 GridView 控件 ,声明 代码 如 下 : 

















<asp:GridView ID = "gvEmployee" runat = "server" AutoGenerateColumns = "false" 
onrowediting = "gvEmployee RowEditing" 
onrowupdating = "gvEmployee RowUpdating"> 
onrowcancelingedit = "gvEmployee RowCancelingEdit" 
<Columns > 
<asp:CommandF ield HeaderText = "操作 "ShowEditButton = "true" /> 
<asp:BoundField DataField = "EmployeeID" HeaderText = "ID" 
ReadOnly= "true" /> 
<asp:BoundField DataField = "FirstName" HeaderText = "FirstName" /> 
<asp:BoundField DataField = "LastName" HeaderText = "LastName" /> 
<asp:BoundField DataField = "Title" HeaderText = "Title" /> 
</Columns > 
</asp:GridView> 





请 注意 这 里 声明 的 3 个 事件 过 程 。 

。 Onrowediting: 单 击 Edit 按钮 后 触发 ,通常 在 这 里 编码 使 GridView 进入 编辑 模式 。 

。 Onrowupdating: 当 编 辑 完 数据 并 单 击 Update 按钮 时 发 生 , 通 常 在 这 里 编码 将 修改 
的 数据 保存 到 数据 库 中 。 

。 Onrowcancelingedit: 当 编 辑 过 程 中 单 击 Cancel 按钮 时 发 生 , 通 常 在 这 里 编写 代码 
放弃 所 做 的 编辑 ,返回 到 浏览 模式 。 

(2) 显示 所 有 记录 : 为 了 使 页 面 运行 时 能 自动 显示 所 有 员工 信息 ,通常 使 用 Page_Load 

事件 ,代码 如 下 : 


bey 


protected void Page Load(object sender, EventArgs e) { 
if (!Page. IsPostBack) { 
bindgv( ); 
} 
private void bindgv() { 
using (SqlConnection conn = new SqlConnection(connstr)) { 
conn. Open( ); 
SqlCommand cmd = conn.CreateCommand(); 
cmd. CommandText = "select EmployeeID, FirstName, LastName, Title 
from Employees"; 
SqlDataReader dr = cmd.ExecuteReader(); 
gvEmployee. DataSource = dr; 
gvEmployee. DataBind( ); 
dr.Close( ); 
cmd. Dispose( ); 
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A¥) 





注意 在 Page_Load 方法 中 要 先 判断 页 面 是 否 回 发 , 若 不 是 回 发 , 则 检索 并 绑 定员 工 信 
息 到 GridView。 该 页 面 的 运行 效果 如 图 8-23 所 示 。 














更 改 员 工 信 息 - Windows ol 


SOME ea 











8-23 使 用 GridView 显示 所 有 记录 


(3) 处 理 Edit 按钮 事件 : GridView 使 用 EditIndex 属性 指示 哪 条 记录 当前 应 处 于 编辑 
模式 ,在 通常 情况 下 该 值 设 置 为 一 1, 表 示 所 有 记录 都 处 于 浏览 模式 。 若 要 进入 编辑 模式 ,只 
要 设置 EditIndex 属性 为 要 编辑 记录 的 索引 号 并 重新 绑 定 一 次 数据 。 核 心 代码 如 下 : 





protected void gvEmployee_RowEditing(object sender, GridViewEditEventArgs e){ 
gvEmployee. EditIndex = e.NewEditIndex; 
bindgv(); 

} 


编辑 模式 的 运行 效果 如 图 8-24 所 示 。 





更 疏 员 工 信 息 - Windows Internet Explorer E -ox 
SO /eal Ne 








8-24 ”编辑 模式 的 运行 效果 


(4) 处 理 Cancel 按钮 事件 : 当 用 户 在 编辑 模式 下 单 击 Cancel 按钮 时 应 放弃 当前 所 做 
的 修改 ,并 返回 到 浏览 模式 。 代 码 如 下 : 
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protected void gvEmployee RowCancelingEdit( object sender, 
GridViewCancelFditEventArgs e) { 
gvEmployee. EditIndex = 一 17 
bindgv(); 
! 





(5) 处 理 Update 按钮 事件 : 当 用 户 对 某 条 记录 编辑 完成 后 单 击 Update 按钮 时 ,一 般 
要 将 更 改 保存 到 数据 库 中 ,并 使 GridView 重新 进入 浏览 模式 。 核 心 代码 如 下 : 





protected void gvEmployee RowUpdating(object sender, GridViewUpdateEventArgs e) { 
GridViewRow row = gvEmployee.Rows[e.RowIndex]; 
string id = row.Cells[1]. Text; 
string fname = ((TextBox)row.Cells[2].Controls[0]).Text; 
string lname = ((TextBox)row.Cells[3].Controls[0]).Text; 
string title = ((TextBox)row.Cells[4].Controls[0]).Text; 
updategv( id, fname, lname, title); 
} 


该 方法 的 重点 是 获取 输入 的 数据 。 在 该 事件 过 程 中 系统 传人 了 参数 e, 通 过 它 可 以 获 
取 当 前 正在 编辑 的 记录 的 索引 号 ,进而 可 以 在 网 格 中 找到 该 行 。GridView 中 的 每 一 行 都 是 
由 多 个 单元 格 构成 的 ,所 以 用 户 要 在 单元 格 中 检索 数据 。 

对 于 后 3 个 字段 ,由 于 要 进行 编辑 ,数据 绑 定时 系统 会 在 各 单元 格 中 分 别 创建 文本 杠 
(或 复 选 框 ) 来 绑 定数 据 , 这 样 就 可 以 从 单元 格 中 还 原文 本 框 , 进 而 得 到 其 文本 ,注意 还 原文 
本 框 时 要 使 用 强制 类 型 转换 。 巾 于 EmployeeID 为 主键 ,其 值 不 允许 修改 ,系统 不 会 为 其 创 
建文 本 框 对 象 ,用 户 可 以 通过 单元 格 的 Text 属性 获取 其 值 ,或 者 通过 主键 集合 获取 该 行 的 
主键 值 , 这 里 使 用 了 第 一 种 方法 。 

下 一 步 是 保存 数据 并 进行 页 面 更 新 ,代码 如 下 : 





private void updategv( string id, string fname, string lname, string title){ 
using (SqlConnection conn = new SqlConnection(connstr)) { 
conn. Open( ); 
SqlCommand cmd = conn.CreateCommand(); 
cmd. CommandText = (@"update Employees " 
set FirstName = (@fname, LastName = (@ lname, Title= @title 
where EmployeeID= (@ id"; 
cmd. Parameters. AddWithValue("@ id", id); 
cmd. Parameters. AddWithValue( "@ fname", fname); 
cmd. Parameters. RddWithValue("@ lname", lname); 
cmd. Parameters. AddWithValue("@title", title); 
cmd. ExecuteNonQuery( ); 
cmd. CommandText = (@"select EmployeeID, FirstName, LastName, Title 
from Employees"; 
cmd. Parameters. Clear( ); 
SqlDataReader dr = cmd.ExecuteReader(); 
gvEmployee. DataSource = dr; 


gvEmployee. EditIndex = 一 17 
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gvEmployee. DataBind( ); 
dr.Close(); 
cmd. Dispose( ); 


} 
注意 ; 数据 保存 后 一 定 要 重新 绑 定 一 次 GridView ,否则 将 无 法 显示 任何 数据 。 
5. 在 GridView 中 使 用 模板 列 


在 使 用 数据 绑 定 控件 显示 数据 时 ,由 于 要 显示 的 数据 通常 包含 多 条 结构 类 似 的 记录 , 因 
此 经 常 使 用 “模板 (Template) "来 指定 单条 记录 的 显示 格式 ,然后 数据 绑 定 控件 自动 将 这 一 
定义 好 的 模板 应 用 于 所 有 要 显示 的 记录 。 

在 GridView 控件 中 就 大 量 使 用 了 模板 ,在 前 面 的 示例 中 我 们 不 知 不 觉 地 使 用 了 多 种 
系统 内 置 的 模板 。 若 要 完全 按 自 己 的 想法 来 布置 页 面 , 则 要 使 用 模板 列 (TemplateField) 。 
请 看 以 下 示例 。 

例 8-11 列表 显示 所 有 员工 的 详细 信息 。 

传统 的 GridView 模板 都 是 在 一 行 中 显示 一 条 记录 ,但 由 于 员工 信息 数据 项 较 多 ,而 且 
有 的 数据 项 很 长 ,难以 在 传统 的 表 行 中 显示 出 来 ,这 时 就 要 定制 模板 ,声明 如 下 : 



































<asp:GridView ID = "gvEmployee" runat = "server" AutoGenerateColumns = "false" 
GridLines = "None"> 
<HeaderStyle BackColor = "Silver" /> 
<Columns > 
<asp:TemplateField HeaderText = "Employees"> 
< ItemTemplate > 
<b> 
<%# Eval("EmployeeID") 和 > 一 
<%# Eval("FirstName") %> 
<%# Eval("LastName") $%> 
<hr /></b> 
<small> 
<%# Eval("Address") %><br /> 
< 外 井 Eval("City") %>, <%# Eval("Country") %><br /> 
<%# Eval("HomePhone") %><br /> 
< 第 井 Eval("Notes") %><br /><br /> 
</small > 
</ItemTemplate> 
</asp:TemplateField> 
</Columns > 
</asp:GridView> 


图 8-25 显示 了 该 模板 的 运行 效果 。 
在 模板 列 中 可 以 加 入 任意 的 HTML 元 素 以 及 数据 绑 定 表达 式 等 ,完全 可 以 按照 自己 
的 方式 布置 一 切 。 当 数据 绑 定 时 ,GridView 会 从 数据 源 中 获取 数据 并 循环 遍历 这 些 数据 项 
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图 8-25 列表 显示 所 有 员工 的 详细 信息 


目的 集合 。 它 为 每 个 项 目 处 理 ItemTemplate, 计 算 其 中 的 数据 绑 定 表达 式 并 将 值 插入 到 
HTML 中 。 

在 本 例 中 使 用 了 Eval 方法 计算 数据 绑 定 表 达 式 的 值 ,这 是 System. Web. UI DataBinder 
类 的 一 个 静态 方法 ,为 开发 带 来 了 极 大 的 便利 。 它 自动 读 取 绑 定 到 当前 行 的 数据 项 ,使 用 反 
射 机 制 找到 匹配 的 字段 或 属性 并 获取 值 。 另 外 ,Eval 方 法 还 允许 接收 格式 化 字符 串 以 控制 
数据 的 显示 格式 ,例如 : 


<%# Eval("BirthDate"，"{0 : MM/dd/yy}") %> 


用 户 可 以 针对 不 同 的 场景 定义 不 同 的 模板 ,例如 针对 浏览 定义 一 个 只 读 的 模板 ,针对 浏 


览 中 的 交替 项 显示 不 同 的 样式 ,为 编辑 状态 制定 可 读 / 写 的 模板 等 。 多 数 数 据 绑 定 控件 提供 


了 相应 的 方法 ,能 够 在 不 同 的 状态 之 间 切 换 , 并 自动 加 载 相应 的 模板 。 
常用 的 模板 类 型 如 下 。 
。 ItemTemplate: 普通 项 目 模 板 , 用 于 浏览 状态 。 
。 AlternatingItemTemplate: 交替 项 模板 ,在 浏览 状态 下 可 使 用 该 模板 使 相 邻 的 两 行 
数据 采用 不 同 的 样式 显示 ,增强 对 比 度 。 
。 EditItemTemplate: 编辑 项 模板 ,只 对 当前 EditIndex 指向 的 项 目 起 作用 。 
。 HeaderTemplate: 表 头 的 模板 。 
。 FooterTemplate: 页 脚 的 模板 。 
下 面 的 示例 演示 了 使 用 EditItemTemplate 进行 数据 编辑 的 功能 。 
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例 8-12 使 用 模板 列 编辑 员工 的 称谓 及 备注 信息 。 


在 此 例 中 称谓 只 能 从 Mr. .Dr. 、Ms. 和 Mrs. 四 者 中 选择 一 个 ,而 备注 信息 较 长 ,要 使 
多 行文 本 框 编辑 。 

本 例 若 对 称谓 和 备注 字段 使 用 绑 定 列 ,那么 在 编辑 模式 下 将 显示 为 单行 文本 框 ,无 法 达 
到 题目 要 求 , 所 以 这 里 使 用 模板 列 ,分别 定制 IIemTemplate 和 EditItemTemplate 模板 。 

页 面 的 声明 代码 如 下 : 



































<asp:GridView ID = "gvemployee" runat = "server" AutoGenerateColumns = "false" 
DataSourceID = "dsEmployee" Width= "100% "GridLines = "None" > 


<Columns > 
<asp:TemplateField HeaderText = "Edit Employees Information"> 
< ItemTemplate><b> 
< 外 井 Eval("EmployeeID") % > —- < 第 井 Eval("TitleOfCourtesy") %$> 
< 第 井 Eval("FirstName") %> 
<%# Eval("LastName") %><hr /></b> 
<%# Eval("Address") %$><br /> 
<%# Eval("HomePhone") %><br /> 
<%# Eval("Notes") %><br /><br /> 
</ItemTemplate> 
<EditItemTemplate ><b> 


<asp:Label ID ="1lblid" runat = "server" 
Text = '<%# Bind("EmployeeID") %$>'/>— 
<asp:DropDownList ID = "ddltitle" runat = "server" 
DataSource = "<% # CourtesyTitle %>" 
SelectedValue = '<% # Bind("TitleOfCourtesy") %>'> 
</asp: DropDownList > 
<%# Eval("FirstName") %> 
<%# Eval("LastName") %><hr /></b> 
< 外 井 Eval("Address") %><br /> 
< 外 井 Eval("HomePhone") %><br /> 
<asp:TextBox ID = "tbxNotes" runat = "server" 
Text = '<%# Bind("Notes") %>' 
TextMode = "MultiLine" ></asp:TextBox >< br /> 
</EditItemTemplate> 
</asp:TemplateField> 
<asp:CommandField HeaderText = "操作 " ShowEditButton = "true"> 
<HeaderStyle Width= "10%" /> < ItemStyle HorizontalAlign = "Center" /> 
</asp:CommandF ield> 
</Columns > 
</asp:GridView> 
<asp:SqlDataSource ID= "dsEmployee" runat = "server" 
ConnectionString = "<% $ ConnectionStrings:nwconnstr $%>" 
SelectCommand = "select EmployeeID, FirstName, LastName, TitleOfCourtesy, 
Address, HomePhone, Notes from Employees" 
UpdateCommand = "update Employees set TitleOfCourtesy = @titleofcourtesy, 
Notes = @notes where EmployeeID = @employeeid"> 
</asp:SqlDataSource > 


可 以 看 到 ,在 EditItemTemplate 中 ,3 个 关键 字段 的 绑 定 方式 和 ItemTemplate 中 有 很 
大 的 区 别 。ItemTemplate 中 的 数据 绑 定 是 单 向 的 ,只 需 将 数据 源 的 数据 绑 定 到 控件 上 显 
示 , 不 需要 回 传 控 件 的 值 给 数据 源 ,这 种 绑 定 使 用 Eval 方法 即 可 。 而 在 EditItemTemplate 
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中 ,有 些 控件 还 要 将 更 改 后 的 值 回 传 给 DataSource 控件 ,以 便 它 能 够 以 这 些 数据 为 参数 执 
行 更 新 语句 ,在 这 种 双向 传 值 的 情况 下 必须 使 用 Bind 方法 绑 定数 据 。 当 GridView 提交 更 
新 时 ,只 提交 Bind 方法 绑 定 的 参数 ,所 以 Update 语句 的 所 有 参数 必须 以 Bind 方法 绑 定 , 否 
则 将 无 法 接收 到 值 。 

对 于 EmployeeID 字段 ,由 于 它 只 是 显示 ,不 允许 更 改 , 所 以 只 需 定 义 一 个 标签 控件 ,并 
将 字段 值 绑 定 到 标签 的 Text 属性 上 。 

对 于 称谓 字段 ,要 求 只 能 选择 而 不 能 输入 ,所 以 要 在 模板 中 为 其 创建 下 拉 列 表 框 。 下 拉 
列表 框 中 的 选项 又 如 何 来 呢 ? 本 例 中 通过 DataSource 属性 将 一 个 字符 串 数 组 绑 定 给 它 ,而 
该 字符 串 数 组 可 以 通过 页 面 的 属性 或 方法 来 定义 ,本 例 中 使 用 了 属性 ,代码 如 下 ， 








protected string[ ] TitleOfCourtesy { 
get { return new string[ ] { "Mr.", "Dr.", "Ms.", "Mrs."}; } 


将 下 拉 列 表 框 的 数据 绑 定 后 还 要 设置 员工 的 当前 称谓 信息 ,将 当前 员工 的 称谓 字段 值 
绑 定 到 下 拉 列 表 框 的 SelectedValue 属性 上 即 可 。 

对 于 备注 字段 ,这 里 创建 了 多 行文 本 框 , 并 将 字段 值 绑 定 到 文本 框 的 Text 属性 上 。 

为 了 支持 数据 更 新 ,在 GridView 中 还 定义 了 CommandField 列 。 该 页 面 的 运行 效果 如 
图 8-26 所 示 。 
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图 8-26 ”使 用 模板 列 编辑 信息 





若 不 想 使 用 数据 源 控 件 ,而 要 在 GridView 的 RowUpdating 事件 过 程 中 编码 实现 数据 
更 新 ,那么 可 以 在 GridView 行 上 调用 FindControl 方法 查找 指定 的 控件 ,然后 从 控件 中 取 
得 输入 值 。 在 这 种 情况 下 就 不 用 考虑 Eval 绑 定 和 Bind 绑 定 的 区 别 了 。 代 码 如 下 : 


protected void gvemployee_RowUpdating(object sender, GridViewUpdateEventArgs e) { 
GridViewRow row = gvEmployee.Rows[e.RowIndex]; 
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string id = gvEmployee.DataKeys[e. RowIndex]. Value.ToString( ); 


string title = ((DropDownList)row.FindControl("ddltitle")).SelectedValue; 
string notes = ((TextBox)row.FindControl("tbxnotes")).Text; 
doupdate( id, title, notes); 


说 明 : 在 使 用 GridViewRow 对 象 的 FindControl() 方 法 查找 控件 时 ,一 定 要 确保 方法 
参数 的 值 与 模板 上 该 控件 的 ID 属性 值 保持 一 致 。 
8-13 ”使 用 模板 列 实现 多 条 记录 的 批量 删除 。 

使 用 按钮 列 或 命令 列 可 以 在 GridView 的 每 行 显示 一 个 按钮 , 单 击 按钮 操作 该 行 数据 。 
有 时 需要 对 多 行 数据 进行 批量 操作 ,这 时 可 以 使 用 模板 列 在 每 行 显示 一 个 复 选 框 ,用 户 选 中 
多 个 复 选 框 后 ,再 从 GridView 中 获取 所 有 选择 项 的 主键 进行 批量 操作 。 

该 示例 的 控件 声明 如 下 : 


宣 
































<asp:GridView ID = "gvEmployee" runat = "server" AutoGenerateColumns = "false" 
DataKeyNames = "employeeid"> 
<Columns > 
<asp:BoundField DataField = "EmployeeID" HeaderText = "ID" ReadOnly= "true" /> 
<asp:BoundField DataField = "FirstName" HeaderText = "First Name" /> 
<asp:BoundField DataField = "LastName" HeaderText = "Last Name" /> 
<asp:BoundField DataField = "Title" HeaderText = "Title" /> 
<asp:TemplateField HeaderText = "选择 "> 
<ItemTemplate> 
<asp:CheckBox ID = "cbxSel" runat = "server" /> 
</ItemTemplate> 
<ItemStyle HorizontalAlign= "Center" /> 
</asp:TemplateField> 
</Columns > 
</asp:GridView> 
<asp:Button ID= "btndel" runat = "server" Text = "批量 删除 " onclick = "btndel_Click" 
OnClientClick = "return confirm( ' 确 认 人 删除 这 些 记 录 吗 ?');" /> 


运行 效果 如 图 8-27 所 示 。 


ID First Name Last Name 
Nancy Davobo 








TTTTTT Nm ” 
图 8-27 使 用 模板 列 实现 多 条 记录 的 批量 删除 
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当 按 下 “批量 删除 ”按钮 后 ,首先 在 客户 端 弹 出 确认 删除 对 话 框 ,用 户 单 击 “确定 ”按钮 后 
再 触发 服务 器 端的 事件 过 程 btndel_Click。 代 码 如 下 : 








protected void btndel Click(object sender, EventArgs e) { 
List< int> ids = getselectedids ( ) ; 
if (ids.Count > 0) { 
StringBuilder sb = new StringBuilder("delete from Employees where employeeid in (" ); 
foreach (int eid in ids) { 
sb. Append( eid); sb. Append(","); 
1 
sb[sb.Length — 1] = ') 7; 
delselected(sb.ToString( ) ) ; 
1 
} 


该 段 代码 首先 调用 getselectedids 函数 获取 所 有 被 选 员 工 的 代码 列表 ,然后 使 用 
StringBuilder 对 象 动态 构造 一 条 批量 删除 数据 的 SQL 语句 ,最 后 执行 删除 操作 。 
获取 所 有 被 选 员工 代码 的 函数 如 下 : 


private List< int> getselectedids( ) { 
List< int> list = newList<int>( ) : 
foreach (GridViewRow row in gvEmployee.Rows) { 
if (row. RowTYpe == DataControlRowType.DataRow) { 
CheckBox cbx = row.FindControl("cbxsel" ) as CheckBox ; 
if ( cbx != null && cbx. Checked ) { 
list. Add( (int) gvEmployee. DataKeys[row. RowIndex]. Value); 
由 
1 
} 
return list; 


1 


这 段 代 码 中 同样 调用 了 GridViewRow 对 象 的 FindControl 方法 ,在 每 一 行 中 查找 复 选 
框 对 象 , 若 该 对 象 被 选中 , 则 从 主键 列表 中 找到 该 行 数据 的 主键 ,添加 到 list 中 返回 。 需 要 
说 明 的 是 ,在 遍历 所 有 表 行 时 ,必须 先 判断 该 行 是 不 是 数据 行 ,只 有 数据 行 才 可 以 从 中 查找 
复 选 框 控件 ,其 他 行 (Header、Footer 等 ) 则 略 过 。 


8.3.2 ListView 控件 


ListView 是 ASP. NET 3. 5 中 新 增 的 一 个 控件 ,用 于 取代 ASP. NET 1. X 中 的 
Repeater 控件 。 它 是 一 个 非常 灵活 的 轻 量 级 控件 ,完全 根据 自 定 义 的 模板 来 呈现 内 容 , 并 
上 是 提 供 了 对 选择 、 编 辑 等 高 级 特性 的 支持 。 使 用 ListView 最 常见 的 原因 是 为 了 创建 特殊 的 
布局 ,例如 创建 在 一 行 中 显示 多 个 项 目的 表 .或 者 彻底 脱离 基于 表格 的 呈现 。 








1. ListView 的 模板 
ListView 比 GridView 提供 了 更 多 的 模板 ,主要 包括 表 8-6 中 的 模板 。 


列 
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表 8-6 在 ListView 中 可 以 使 用 的 模板 
描 述 





ItemTemplate 


设置 所 有 数据 项 (没有 使 用 AlternatingItemTemplate 时 ) 或 奇数 行 数据 项 
(使 用 AlternatingItemTemplate 时 ) 的 内 容 和 格式 





AlternatingItemTemplate 


和 ItemTemplate 配合 ,设置 偶数 行 的 内 容 和 格式 





JItemSeparatorTemplate 


设置 在 项 目 中 间 绘 制 的 分 隔 符 的 格式 





SelectedItemTemplate 


设置 当前 选 定 项 目的 内 容 和 格式 

















EditItemTemplate 设置 数据 项 在 编辑 模式 下 使 用 的 控件 
InsertItemTemplate 设置 插入 新 项 目 时 使 用 的 控件 
LayoutTemplate 设置 包装 项 目 列表 的 标记 

GroupTemplate 若 使 用 了 分 组 功能 , 则 设置 包装 项 目 组 的 标记 
GroupSeparatorTemplate | 设置 项 目 组 的 分 隔 符 格式 





EmptyDataTemplate 





当 绑 定 的 数据 对 象 为 空 时 (没有 记录 或 对 象 ) 使 用 该 模板 设置 提示 信息 


在 ListView 呈现 自身 时 ,首先 对 绑 定 的 数据 进行 迭代 ,为 每 个 项 目 呈 现 
ItemTemplate ,然后 将 多 余 的 Item 都 放 到 LayOutTemplate 里 ,从 而 实现 布局 控制 。 


2. 在 ListView 中 呈现 项 


在 ListView 中 设置 ItemTemplate 的 方法 与 GridView 类 似 , 所 以 这 里 主要 的 问题 是 如 
何 将 Item 添加 到 整体 布局 中 。 请 看 以 下 示例 。 

例 8-14 使 用 ListView 控件 显示 员工 的 信息 。 

ListView 控件 的 声明 如 下 : 





<asp:ListView ID = "lvEmployee" runat = "server" DataSourceID = "dsEmployee"> 

<LayoutTemplate> 

<span id = "itemPlaceholder" runat = "server"></span> 
</LayoutTemplate> 
<ItemTemplate ><b> 

<%%# Eval("EmployeeID") %>— 

<%# Eval("TitleOfCourtesy") %> 

<%# Eval("FirstName") $%> 

<%# Eval("LastName") %> 


<hr /></b> 


< 第 井 Eval("Address") %><br /> 
< 第 井 Eval("HomePhone") %><br /> 
< 第 井 Eval("Notes") %><br /> <br /> 


</ItemTemplate > 


</asp:ListView> 


可 以 看 出 ,在 ListView 中 至 少 要 定义 两 个 模板 
位 符 将 项 目 添加 到 布局 中 
要 用 itemPlaceHolder ,并 且 runat 




















项 目 模板 和 布局 模板 。 通 过 一 个 占 
h ,这 个 占 位 符 可 以 是 各 种 各 样 的 HTML 元 素 ,但 其 ID 属性 一 定 





























属性 必须 为 server。 该 页 面 的 运行 效果 类 似 于 图 8-23。 











3. 使 用 GroupTemplate 分 组 项 


有 时 要 在 一 行 中 显示 多 项 ,这 就 需要 通过 分 组 模板 来 实现 。 
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例 8-15 ”使 用 ListView 显示 员工 的 信息 ,每 行 显示 3 个 员工 。 
ListView 控件 的 声明 如 下 : 





<asp:ListView ID= "lvEmployee" runat = "server" GroupItemCount = "3" 
DataSourceID = "dsEmployee" > 
<LayoutTemplate> 
<table border = "0" cellpadding = "10" width= "100% "> 
<tr id = "groupPlaceholder" runat = "server"></tr> 
</table> 
</LayoutTemplate> 
<GroupTemplate > 
<tr><td runat = "server" id = "itemPlaceholder" /></tr> 
</GroupTemplate > 
<ItemTemplate> 
<tdvalign= "top"> <b> 
< 和 井 Eval("EmployeeID") $%> 一 
<%# Eval("TitleOfCourtesy") %> 
< 外 井 Eval("FirstName") %> 
<%# Eval("LastName") %> 
</b><hr /> 
< 外 井 Eval("Address") %><br /> 
<%# Eval("HomePhone") %><br /> 
<%# Eval("Notes") %><br /> 
</td> 
</ItemTemplate > 
</asp:ListView> 


该 页 面 的 运行 效果 如 图 8-28 所 示 。 
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图 8-28 使 用 ListView 的 页 面 运行 效果 
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使 用 分 组 需要 先 设置 ListView 的 GroupItemCount 属性 , 它 决定 每 个 组 里 项 目的 个 
数 ,在 本 例 中 设置 为 3。 

有 了 组 ,就 在 项 和 布局 之 间 有 了 一 个 中 间 层 ,要 将 项 加 入 组 ,再 将 组 加 入 布局 中 。 这 里 
同样 使 用 了 占 位 符 , 将 名 称 为 groupPlaceholder 的 占 位 符 加 入 布局 模板 , 再 将 名 称 为 
itemPlaceholder 的 占 位 符 加 入 组 模板 ,最 后 定义 ItemTemplate。 

关于 ListView 的 高 级 特性 ,请 读者 参阅 MSDN 文档 ,这 里 不 再 详细 介绍 。 



































8.3.3 ” DetailsView 控件 





GridView 和 ListView 都 可 以 一 次 呈现 多 条 记录 ,但 有 时 用 户 会 要 求 呈现 单条 记录 的 
详细 信息 ,这 时 可 以 使 用 DetailsView 或 FormView。 二 者 都 是 每 次 显示 一 条 记录 ,同时 包 
含 一 个 可 选 的 分 页 按钮 ,用 在 一 组 记录 间 导 航 ; 二 者 的 区 别 在 于 FormView 可 以 创建 复杂 
的 模板 ,DetailsView 使 用 简单 的 模板 ,相当 于 简 版 的 FormView。 

DetailsView 使 用 表格 布局 的 方式 ,每 次 显示 一 条 记录 ,将 每 个 数据 项 显示 在 表格 的 一 
行 中 。 当 DetailsView 被 绑 定 到 一 个 项 目 集合 上 时 , 它 将 显示 集合 中 的 第 一 个 项 目 ; 若 将 
AllowPaging 属性 设置 为 真 , 它 还 会 自动 创建 一 组 分 页 控件 ,用 于 在 各 个 项 目 之 间 导 航 。 需 
要 说 明 的 是 ,使 用 DetailsView 控件 来 浏览 多 条 记录 可 能 会 存在 效率 问题 ,每 当 用 户 单 击 分 
页 控件 切换 记录 时 ,虽然 最 终 只 显示 指定 的 一 条 记录 ,但 系统 却 会 获取 所 有 满足 条 件 的 记 
录 , 这 会 造成 无 谓 的 数据 库 负荷 ,在 实际 应 用 中 ,用 户 一 定 要 考虑 使 用 缓存 或 自 定义 分 页 的 
方式 来 优化 程序 。 


1. 为 DetailsView 定义 字段 








当 绑 定 到 数据 源 时 ,DetailsView 可 以 使 用 反射 的 机 制 自动 生成 所 有 字段 。 用 户 也 可 以 
将 它 的 AutoGenerateColumns 属性 设置 为 假 , 然 后 手工 定义 所 有 字段 。 用 户 可 以 像 定 义 
GridView 的 字段 那样 为 DetailsView 定义 字段 ,只 不 过 GridView 的 字段 通常 显示 在 列 上 ， 
而 DetailsView 的 字段 通常 显示 在 行 上 。 

例 8-16 ”使 用 DetailsView 控件 开发 一 个 员工 信息 浏览 器 。 

页 面 的 声明 代码 如 下 : 


<asp:DetailsView ID = "dvEmployee" runat = "server" RutoGenerateRows = "false" 
DataKeyNames = "EmployeeID" DataSourceID = "dsEmployee" AllowPaging = "true" > 
<Fields> 
<asp:BoundField DataField = "EmployeeID" HeaderText = "EmployeeID" /> 
<asp:BoundField DataField = "FirstName" HeaderText = "FirstName" /> 
<asp:BoundField DataField = "LastName" HeaderText = "LastName" /> 
<asp:BoundField DataField = "Address" HeaderText = "Address" /> 
<asp:BoundField DataField = "HomePhone" HeaderText = "HomePhone" /> 
<asp:BoundField DataField = "Notes" HeaderText = "Notes" /> 
</Fields> 
</asp:DetailsView> 
<asp:SqlDataSource ID = "dsEmployee" runat = "server" 
ConnectionString= "<% $ ConnectionStrings:nwconnstr 先 >" 
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SelectCommand = "select EmployeeID, FirstName, LastName, Address, HomePhone, 
Notes from Employees" > 
</asp:SqlDataSource> 


该 页 面 的 运行 效果 如 图 8-29 所 示 。 
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图 8-29 使 用 DetailsView 控件 的 页 面 运行 效果 


在 DetailsView 中 同样 可 以 使 用 HyperLinkField、ButtonField、CommandField、 
TemplateField 等 ,其 使 用 方法 及 编程 模型 和 GridView 基本 相同 ,这 里 不 再 过 多 说 明 。 


2. 在 DetailsView 中 进行 记录 的 操作 


DetailsView 控件 不 仅 能 够 浏览 数据 ,还 支持 数据 的 插入 删除 以 及 编辑 操作 。 用 户 只 要 
设置 其 AutoGenerateInsertButton、AutoGenerateEditButton 及 AutoGenerateDeleteButton 属性 
值 为 真 ,系统 就 会 自动 在 DetailsView 的 底部 增加 一 行 链 接 按钮 ,提供 相应 的 功能 。 当 单 击 
删除 按钮 时 ,系统 立刻 执行 删除 操作 ; 而 当 单 击 插入 或 编 
辑 按 钮 时 ,系统 会 进入 编辑 状态 ,允许 用 户 添加 新 记录 或 
修改 当前 记录 。 

DetailsView 共 提 供 了 3 种 操作 模式 , 即 只 读 模式 、 插 
人 模式 和 编辑 模式 。 默 认 DetailsView 使 用 只 读 模式 ,只 
能 浏览 而 不 能 更 改 数据 ; 用 户 可 以 通过 CurrentMode 属 
性 获取 当前 的 模式 ,并 通过 ChangeMode() 方 法 改变 当前 
模式 。 

在 插入 或 编辑 模式 下 , DetailsView 使 用 标准 的 文本 
框 来 接收 数据 ,如 图 8-30 所 示 。 在 编辑 模式 下 若 切 换 记 
录 , 新 显示 的 记录 也 处 于 编辑 模式 ; 若 想 改变 这 种 行为 方 
式 ,用 户 可 以 捕获 PageIndexChanged 事件 ,在 其 中 调用 
ChangeMode() 方 法 将 其 改 为 只 读 模式 。 





图 8-30 ”DetailsView 用 来 接收 
数据 的 标准 文本 框 


8.3.4 FormView 控件 
如 果 想 完全 控制 单条 记录 显示 及 编辑 的 样式 ,可 以 使 用 FormView 控件 , 它 完全 依赖 于 





模板 ,提供 了 最 大 的 灵活 性 。 
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和 GridView 类 似 , 在 FormView 的 模板 列 中 可 以 使 用 TtemTemplate 、EditltemTemplate 、 





InsertItem Template 、EmptyDataTemplate 、 HeaderTemplate 、FooterTemplate 及 PagerTemplate 


例 8-17 使 用 FormView 开发 一 个 员工 信息 的 增 、 删 、 改 、 查 程序 。 
为 简单 起 见 ,本 例 中 只 处 理 EmployeeID、FirstName、 LastName、TitleOfCourtesy 和 


Notes 等 数据 项 。 





(1) 建立 两 个 数据 源 ,声明 如 下 : 


<asp:SqlDataSource ID = "dsEmployee" runat = "server" 
ConnectionString = "<% $ ConnectionStrings:nwconnstr %>" 
SelectCommand = " select EmployeeID, FirstName, LastName,TitleOfCourtesy, 
Notes from Employees" 
UpdateCommand = "update Employees set FirstName = (@firstname, 
LastName = (@ lastname, TitleOfCourtesy = (Qtitleofcourtesy，Notes = (@notes 
Where EmployeeID = @employeeid" 
InsertCommand = " insert into Employees( LastName, FirstName, TitleOfCourtesy, 
Notes) values (@lastname, @firstname, (@titleofcourtesy, (@notes)" 
DeleteCommand = "delete from Employees where EmployeeID = (@employeeid"> 
</asp:SqlDataSource> 
<asp:SqlDataSource ID = "dsTitle" runat = "server" 
ConnectionString= "<% $ ConnectionStrings:nwconnstr $%>" 
SelectCommand = "select distinct TitleOfCourtesy from Employees"> 
</asp:SqlDataSource > 


第 一 个 数据 源 提供 了 对 Employees 表 的 增 、 删 、 改 、 查 命令 ,第 二 个 数据 源 获取 称谓 信 


息 , 以 便 在 编辑 模板 中 填充 员工 称谓 下 拉 列 表 框 。 


dsEmployee 数据 源 ,并 设置 其 AllowPaging 属性 为 真 ， 
在 其 智能 标记 中 单 击 “ 刷 新 架构 ”按钮 。 切 换 到 源 代码 
视图 下 ,可 以 看 到 系统 已 经 为 FormView 自动 生成 了 
InsertTemplate、EditTemplate 及 ItemTemplate 模板 。 
这 时 运行 该 页 面 , 编 辑 状 态 下 的 效果 如 图 8-31 所 示 。 


以 编辑 数据 。 为 避免 输入 错误 的 称谓 ,我 们 希望 能 够 
从 下 拉 列 表 中 选择 TitleOfCourtesy, 这 就 需要 对 


(2) 向 页 面 上 添加 一 个 FormView 控件 ,设置 其 DataSourceID 为 刚才 建立 的 


可 以 看 到 ,系统 自动 为 所 有 可 编辑 列 创建 TextBox 





ee 以 及 InsertItemTemplate 进行 图 8.31 编辑 状态 下 的 页 面 效果 
由 Jo 


(3) 定制 FormView 中 的 模板 声明 如 下 : 


<asp:FormView ID = "FormViewl" runat = "server”DataKeyNames = "EmployeeID" 
DataSourceID = "dsEmployee" AllowPaging = "true"> 
<EditItemTemplate > 
EmployeeID: <asp:Label ID = "EmployeeIDLabell" runat = "server" 
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Text = '<% 井 Eval("EmployeeID") %>'/><br /> 
FirstName: <asp:TextBox ID = "FirstNameTextBox" runat = "server" 
Text = '<% 井 Bind("FirstName") %>'/><br /> 
LastName: <asp:TextBox ID = "LastNameTextBox" runat = "server" 
Text = '<%# Bind("TitleOfCourtesy") %>'! /> <br /> 
TitleOfCourtesy: <asp:DropDownList ID = "ddltitle" runat = "server" 
DataSourceID = "dsTitle" DataValueField = "TitleOfCourtesy" 
SelectedValue = '<% # Bind("TitleOfCourtesy") %>'/><br /> 
<asp:LinkButton ID= "UpdateButton" runat = "server" CausesValidation= "true" 
CommandName = "Update" Text = "更 新 " /> gnbsp; 
<asp:LinkButton ID= "UpdateCancelButton" runat = "server" 
CausesValidation = "false" CommandName = "Cancel" Text = "取消 " /> 
</EditItemTemplate > 
<InsertItemTemplate > 
FirstName: <asp:TextBox ID = "FirstNameTextBox" runat = "server" 
Text = '< 多 井 Bind("FirstName") %>'/><br /> 
LastName: < asp:TextBox ID = "LastNameTextBox" runat = "server" 
Text = '<%# Bind("LastName") %>'/> <br /> 
TitleOfCourtesy: <asp:DropDownList ID = "ddltitle" runat = "server" 
DataSourceID = "dsTitle" DataValueField = "TitleOfCourtesy" 
SelectedValue = '<% # Bind("TitleOfCourtesy") %>' /> <br /> 
<asp:LinkButton ID= "InsertButton" runat = "server" CausesValidation= "true" 
CommandName = "Insert" Text = "插入 " /> &nbsp; 
<asp:LinkButton ID= "InsertCancelButton" runat = "server" 
CausesValidation = "false" CommandName = "Cancel" Text = "取消 " /> 
</InsertItemTemplate> 
<ItemTemplate > 
EmployeeID: <% # Eval("EmployeeID") %><br /> 
FirstName: <% 井 Eval("FirstName") %><br /> 
LastName: <% # Eval("LastName") % ><br /> 
TitleOfCourtesy: <% # Eval("TitleOfCourtesy") %><br /> 
<asp:LinkButton ID= "EditButton" runat = "server" CausesValidation = "false" 
CommandName = "Edit" Text = "编辑 " /> gnbsp; 
<asp:LinkButton ID = "DeleteButton" runat = "server" CausesValidation= "false" 
CommandName = "Delete" Text = "删除 " /> gnbsp; 
<asp:LinkButton ID = "NewButton" runat = "server" CausesValidation= "false" 
CommandName = "New" Text = "新 建 ”/> 
</ItemTemplate > 
</asp:FormView> 


可 以 看 到 ,在 编辑 和 搬入 模板 中 定义 了 
DropDownList 控件 , 其 DataSourceID 属性 设置 为 
dsTitle, 这 样 可 以 自动 从 数据 库 中 获取 所 有 称谓 ,其 
SelectedValue 属性 绑 定 到 了 数据 项 TitleOfCourtesy 
上 ,保证 了 保存 数据 时 下 拉 列 表 框 中 的 选项 值 可 以 回 
传 给 dsEmployee 数据 源 。 更 改 后 的 编辑 模板 的 运行 
效果 如 图 8-32 所 示 。 

可 以 看 到 ,FormView 控件 也 支持 只 读 、 插 入 和 编 
辑 3 种 模式 。 但 与 GridView 和 DetailsView 不 同 的 是 ， 
FormView 不 支持 自动 创建 按钮 列 (CommandField) , 必 
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须 手 工 创建 各 种 按钮 对 象 。 注 意 在 ItemTemplate 中 创建 了 编辑 、 删 除 和 新 建 3 个 按钮 ,在 
编辑 模板 中 创建 了 更 新 和 取消 两 个 按钮 ,在 插入 模板 中 创建 了 插入 和 取消 两 个 按钮 。 用 户 
可 以 使 用 Button 或 LinkButton 创建 按钮 ,所 有 按钮 的 CommandName 属性 必须 设置 为 合 
适 的 值 ,这样 才能 触发 相应 的 事件 ,自动 进行 模式 的 切换 。 常 用 的 命令 名 见 表 8-7。 

表 8-7 FormView 的 命令 按钮 中 可 以 使 用 的 CommandName 值 

命 令 作 用 

Edit 适用 于 ItemTemplate, 从 只 读 模 式 切换 到 编辑 模式 以 编辑 当前 项 



















































































适用 于 EditItemTemplate 和 InsertItemTemplate, 在 编辑 或 插入 模式 下 放弃 数据 ,返回 到 只 读 
模式 


Cancel 





Update | 适用 于 EditItemTemplate, 将 编辑 后 的 数据 保存 下 来 并 返回 只 读 模式 





New 适用 于 ItemTemplate, 插 入 一 条 新 数据 并 转 入 编辑 模式 





Insert | 适用 于 InsertJtemTemplate, 将 插入 的 数据 保存 下 来 并 返回 只 读 模 式 




















Delete | 适用 于 ItemTemplate, 直 接 删 除 当前 项 


8.4 使 用 实体 框架 与 模型 绑 定 技术 


使 用 GridView 、ListView 等 富 数据 控件 时 ,还 可 以 为 其 绑 定 模型 类 ,这 样 可 以 使 数据 
交互 变 得 更 加 简单 直接。 模型 绑 定 技术 可 以 与 任何 数据 访问 技术 配合 使 用 ,本 节 将 使 用 实 
体 框架 结合 GridView 与 模型 绑 定 技术 实现 完整 的 数据 增 、 删 改 、 查 操作 。 

例 8-18 ”针对 学 生 选 课 的 数据 模型 开发 基本 的 学 生 管理 系统 。 

(1) 创建 Web 工程 : 新 建 Web 项 目 , 输 入 工程 名 “University” ,并 选择 “Web 窗 体 ” 工 
程 模 板 。 

(2) 创建 数据 模型 ; 使 用 实体 框架 的 代码 优先 迁移 (Code First Migrations) 工 具 可 以 方 
便 地 建立 对 象 模型 ,进而 创建 数据 库 和 表 。 

在 Models 文件 夹 中 创建 模型 类 ,文件 名 为 UniversityModels. cs, 代 码 如 下 : 


using System. Collections. Generic; 
using System. ComponentMode1. DataAnnotations; 
using System. Data. Entity; 
namespace University. Models { 
public class SchoolContext : DbContext { 
public DbSet < Student > Students { get; set; } 
public DbSet < Enrollment > Enrollments { get; set; } 
public DbSet < Course > Courses { get; set; } 
. 
public class Student { 
[Key, Display(Name = "ID")] 
[ScaffoldColumn(false)] 
public int StudentID { get; set; } 
[Required, StringLength(40), Display(Name = "Last Name")] 
public string LastName { get; set; } 
[Required, StringLength(20), Display(Name = "First Name")] 
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public string FirstName { get; set; } 
[EnumDataType( typeof (AcademicYear))] 
public AcademicYear Year { get; set; } 
public virtual ICollection <Enrollment > Enrollments { get; set; } 
h 
public class Course{ 
[Key] 
public int CourseID { get; set; } 
public string Title { get; set; } 
public int Credits { get; set; } 
public virtual ICollection < Enrollment > Enrollments { get; set; } 
} 
public class Enrollment { 
[Key] 
public int EnrollmentID { get; set; } 
public int CourseID { get; set; } 
public int StudentID { get; set; } 
public decimal? Grade { get; set; } 
public virtual Course Course { get; set; } 
public virtual Student Student { get; set; } 
有 


public enum AcademicYear { Freshman, Sophomore, Junior, Senior } 


可 以 看 出 ,这 里 创建 了 Student、Course 和 Enrollment 几 个 模型 类 ,以 及 用 于 访问 数据 
库 的 SchoolContext 类 。 基 于 该 模型 ,我们 将 使 用 Code First Migrations 工具 来 创建 数据 
库 , 并 填充 一 些 初始 数据 。 

(3) 创建 数据 库 并 填充 初始 数据 : 在 Visual Studio 中 选择 “Nuget 包 管 理 器 程序 
包 管 理 器 控制 台 ” ,打开 包 管 理 器 控制 台 ,输入 以 下 命令 。 


enable — migrations - ContextTypeName University. Models. School1Context 


该 命令 将 以 SchoolContext 中 定义 的 模型 为 基础 来 创建 数据 库 基 础 架构 ,命令 执行 成 
功 后 会 创建 Migrations 文件 夹 ,并 在 其 中 创建 Configuration. cs 文件 ,创建 数据 库 及 添加 初 
始 数据 的 代码 将 加 入 到 该 类 的 Seed 方法 中 ,如 下 : 


context. Students. AddOrUpdate( 
new Student { 
FirstName = "Carson", 
LastName = "Alexander", 
Year = AcademicYear.Freshman 
}, 
new Student{ 
FirstName = "Meredith", 
LastName = "Alonso", 
Year = AcademicYear.Freshman 
}, 
new Student{ 
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FirstName = "Rrturo"， 
LastName = "Rnand"， 
Year = RcademicYear.Sophomore 
}, 
new Student{ 
FirstName = "Gytis", 
LastName = "Barzdukas", 
Year = AcademicYear.Sophomore 
}, 
new Student{ 
FirstName = "Yan"， 
LastName = "Li", 
Year = AcademicYear.Junior 
new Student{ 
FirstName = "Peggy", 
LastName = "Justice", 
Year = AcademicYear. Junior 
电 
new Student { 
FirstName = "Laura", 
LastName = "Norman", 
Year = AcademicYear,. Senior 
’ 
new Student{ 
FirstName = "Nino", 
LastName = "Olivetto"， 
Year = AcademicYear. Senior 





); 

context. SaveChanges( ); 

context. Courses. AddOrUpdate( 
new Course { Title = "Chemistry", Credits = 3 }, 
new Course { Title = "Microeconomics", Credits = 3 }, 
new Course { Title = "Macroeconomics", Credits = 3 }, 
new Course { Title = "Calculus", Credits = 4 }, 
new Course { Title = "Trigonometry", Credits = 4 }, 
new Course { Title = "Composition", Credits = 3 }, 
new Course { Title = "Literature", Credits = 4 } 

); 

context. SaveChanges( ); 

context. Enrol lments. AddOrUpdate( 
new Enrollment { StudentID = 
new Enrollment { StudentID = 
new Enrollment { StudentID = 


1, CourseID = 1 
1, CourselD = 2, Grade = 3 }, 
1, CourselD = 3, Grade = 1 }, 
new Enrollment { StudentID = 2, CourselD = 4, Grade = 2 }, 
new Enrollment { StudentID = 2, CourselD = 5, Grade = 4 }, 
new Enrollment { StudentID = 2, CourselD = 6, Grade = 4 }, 
new Enrollment { StudentID = 3，CourseID = 1 }, 
new Enrollment { StudentID = 4, CourselD = 1 }, 
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, CourselD = 2, Grade 
, CourselD = 3, Grade 
, CourselD = 4 }, 

, CourselD = 5, Grade = 2} 


4]， 
3]， 


new Enrollment { StudentID = 
new Enrollment { StudentID 
new Enrollment { StudentID 
new Enrollment { StudentID 


0 
OUw 心 
上 


); 
context. SaveChanges( ); 


在 包 管理 器 控制 台中 连续 执行 以 下 两 条 命令 : 


add — migration initial 
update - database 


其 中 ,第 一 条 命令 用 来 创建 数据 库 迁 移 脚本 ,第 二 条 命令 真正 执行 该 脚本 。 很 显然 , 系 
统 将 在 数据 库 中 建立 Students Courses 和 Enrollments 几 张 表 , 并 插入 Seed 方法 中 提供 的 
数据 。 打 开 服 务 器 资源 管理 器 ,连接 到 该 数据 库 , 可 以 查询 表 结 构 及 数据 。 

(4) 显示 学 生 的 相关 信息 : 首先 修改 模板 页 ,以 便 显示 应 用 程序 的 名 称 和 导航 菜单 。 

打开 Site. Master 母 版 页 ,更改 navbar-header 中 的 应 用 程序 标题 , 





<a class = "navbar - brand" runat = "server" href = "一 /"> 学 生 管理 </a> 


同时 删除 原 有 的 About 和 Contact 导航 菜单 ,添加 Student 导航 菜单 : 


<1i><a runat = "server" href ="~/Students"> Students </a></1i> 


然后 以 Site. Master 为 母 版 建立 新 的 Web 窗 体 , 取 名 为 Students. aspx。 下 面 将 在 该 窗 
体 中 使 用 GridView 控件 显示 学 生 的 相关 信息 。 
打开 Students. aspx 文 件 , 在 MainContent 占 位 符 中 加 入 以 下 代码 ; 


<asp:GridView runat = "server" ID = "studentsGrid" 
ItemType = "University. Models. Student" DataKeyNames = "StudentID" 
SelectMethod = " student sGrid GetData" 
AutoGenerateColumns = "false"> 
<Columns > 
<asp:DynamicField DataF ield= "StudentID" /> 
<asp:DynamicField DataField= "LastName" /> 
<asp:DynamicField DataF ield= "FirstName" /> 
<asp:DynamicField DataField= "Year" /> 
<asp:TemplateField HeaderText = "Total Credits"> 
<ItenmTemplate> 
<asp:Label Text = "<$% # Item.Enrollments. Sum( 
en => en.Course. Credits) %>" runat = "server" /> 
</ItemTemplate> 
</asp:TemplateField> 
</Columns > 
</asp:GridView> 


注意 ,ItemType 属性 指定 了 GridView 绑 定 的 模型 类 ,这 样 在 后 续 的 < Columns > 标签 
中 就 可 以 引用 模型 的 各 个 属性 ,这 就 是 模型 绑 定 技术 的 好 处 。 
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其 难点 在 于 最 后 一 列 , 要 统计 某 学 生 已 获得 的 总 学 分 ,因为 每 个 学 生 都 有 一 个 集合 属性 
Enrollments ,使 用 Item. Enrollments 可 以 获取 该 选课 集合 ,然后 使 用 LINQ 语法 统计 出 所 
选课 程 的 总 学 分 ,代码 如 下 : 






































Item. Enrollments.Sum( en => en.Course. Credits) 





很 显然 ,这 里 针对 Enrollments 实体 集 调 用 了 Sum 扩展 方法 ,并 使 用 了 Lambda 表达 式 
来 构造 统计 函数 ,其 含义 是 将 该 学 生 的 选课 集合 Enrollments 传递 给 参数 en ,并 在 其 上 针对 
学 分 Credits 进行 求 和 。 

还 要 注意 SelectMethod 属性 , 它 指明 了 当 GridView 加 载 数 据 时 所 要 调用 的 方法 , 即 
studentsGrid_GetData 方 法。 在 页 面 后 台 文 件 中 加 入 以 下 代码 : 





public IQueryable < Student > studentsGrid GetData() { 
SchoolContext db = new SchoolContext(); 
var query = db. Students. Include( s => s.Enrollments. Select(e => e.Course)); 
return query; 


这 里 使 用 了 Include 方法 来 加 载 子 查询 , 即 针对 每 个 学 生 查 询 其 所 有 的 选课 信息 ,但 选 
课 实 体 中 只 包含 学 号 , 课 号 和 学 分 3 个 属性 ,不 包含 课程 名 等 详细 信息 ,所 以 这 里 又 从 选课 
实体 连接 到 了 课程 实体 。 粘 贴 以 上 代码 后 会 有 错误 提示 ,这 是 因为 没有 导 和 必要 的 组 件 包 ， 
请 加 入 以 下 语句 : 





using University. Models; 
using System. Data. Entity; 


至 此 ,已 经 可 以 列表 显示 学 生 的 信息 。 运 行 该 程序 , 单 击 Students, 效 果 如 图 8-33 所 示 。 


1 -到 的 ASP.NET 应 用 三 5 x 让， 


所 GG | © localhost:50495/Students 

















IDILast Name First Name Year Total Credits 
1 |Aexander |carson |Freshman |9 | 
2 JAonso |Meredith |Freshman |11 
3 lAnand |Arturo Sophomore|3 
4 |Barzdukas |Gytis Sophomore|6 | 
5 |Yan Junior |3 

| l6 lJustce |Peggy unior 4 
7|Noman liaura |Senior |4 

| jsjowete INno lsenior |o 
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图 8-33 学生 列 表 显 示 页 面 
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在 GridView 声明 中 除了 SelectMethod 属性 以 外 ,还 可 以 指定 UpdateMethod、 
InsertMethod 以 及 DeleteMethod 属性 ,并 选择 自动 提示 中 的 “创建 新 方法 ”在 后 台 文 件 中 添 
加 代码 。 当 GridView 与 模型 绑 定 时 , Visual Studio 自动 生成 的 代码 也 以 该 模型 为 基础 ,很 
容易 修改 。 

(5) 修改 及 删除 学 生 数 据 : 使 用 模型 绑 定 技术 可 以 很 方便 地 实现 数据 更 新 及 删除 操 
为 了 减少 代码 量 , 这 里 将 使 用 “动态 数据 模板 ”自动 为 模型 的 各 属性 生成 相关 控件 。 作 

-种 扩展 组 件 , 用 户 在 使 用 前 必须 先 安装 动态 数据 模板 。 

在 Visual Studio 中 选择 “工具 ”>“NuGet 包 管 理 器 "一 “管理 解决 方案 的 NuGet 包 ”, 然 
后 单 击 “浏览 ”标签 ,并 输入 包 名 DynamicDataTemplatesCS 的 家， 如 图 8-34 所 示 。 
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图 8-34 安装 动态 数据 模板 组 件 包 


在 右 侧 列表 中 选中 当前 项 目 并 单 击 “ 安 装 ” 按 钮 ,按照 提示 安装 完成 后 ,在 解决 方案 资源 
管理 器 中 可 以 看 到 新 增 的 DynamicData 文件 夹 , 它 又 包含 两 个 模板 文件 夹 ,其 中 的 各 个 模 
板 将 被 自动 作用 于 Web Form 中 的 各 个 动态 控件 。 

在 GridView 上 启用 更 改 和 删除 方法 比较 简单 ,需要 在 有 和 DeleteMethod 属 
性 中 指定 要 调用 的 方法 名 称 , 还 需要 配置 自动 生成 编辑 和 删除 按钮 ,完整 代码 如 下 

















<asp:GridView runat = "server" ID = "studentsGrid" 
RutoGenerateColumns = "false" 
ItemType = "University. Models. Student" DataKeyNames = " StudentID"” 
SelectMethod = "studentsGrid GetData" 
UpdateMethod = "studentsGrid_ UpdateItem" 
DeleteMethod = "studentsGrid DeleteItem" 
AutoGenerateEditButton= "true" AutoGenerateDeleteButton= "true" > 





后 台 代 码 文件 中 首先 导入 System. Data. Entity. Infrastructure 包 : 


using System. Data. Entity. Infrastructure; 
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然后 针对 更 改 操作 加 入 以 下 代码 : 


public void studentsGrid UpdateItem( int studentID){ 
using (SchoolContext db = new SchoolContext() ){ 
Student item = null; 
item = db.Students. Find( student1D); 
if (item == null){ 
ModelState. AddModelError("", 
String. Format("Item with id {0} was not found", student1D)); 


return; 


} 
TryUpdateModel ( item); 
if (ModelState. IsValid) { db. SaveChanges( ); | 


这 里 首先 根据 传人 的 ID 查找 Student 对 象 , 若 未 找到 , 则 向 模型 状态 中 写 入 错误 信息 
并 返回 ; 若 找 到 , 则 调用 TryUpdateModel 方法 ,将 表单 控件 的 值 向 模型 对 象 绑 定 ,在 绑 定 
过 程 中 会 自动 进行 数据 验证 , 若 验 证 成 功 , 则 调用 db. SaveChanges() 更 新 数据 。 

再 看 一 下 删除 操作 的 代码 : 

public void studentsGrid _ DeleteItem( int studentID){ 

using (SchoolContext db = new SchoolContext()) { 
var item = new Student { StudentID = studentID }; 
db. Entry(item). State = EntityState.Deleted; 
try{ db. SaveChanges( ); } 
catch (DbUpdateConcurrencyException) { 


ModelState. AddModelError("", 
String. Format("id {0} no longer exists.", student1ID)); 


1 


通过 db. Entry(item) 定位 到 指定 模型 对 象 ,并 设 定 其 状态 为 Deleted ,然后 调用 db. 
SaveChanges() 更 新 数据 库 。 

重新 运行 程序 , 单 击 某 记 录 前 面 的 “编辑 ”按钮 ,界面 如 图 8-35 所 示 。 

注意 GridView 中 的 学 年 列 ,该 列 的 值 为 枚 举 类 型 ,在 编辑 状态 下 枚 举 类 型 自动 显示 为 
下 拉 列 表 框 ,这 巾 动态 数据 模板 自动 实现 ,在 DynamicData 的 FieldTemplates 下 的 
Enumeration_Edit. ascx 中 可 以 定制 其 显示 方式 。 

在 更 新 数据 时 通常 要 进行 数据 校 验 , 当 校 验 不 通过 时 不 能 提交 。 回 头 看 一 看 我 们 设计 
的 Student 模型 类 ,其 中 使 用 注解 设 定 了 很 多 校 验 规则 ,例如 FirstName 和 LastName 不 能 
为 空 FirstName 的 最 大 宽度 为 20 等 ,动态 数据 模板 就 是 根据 这 些 规 则 自动 添加 客户 端 和 
服务 器 端的 校 验 代码 。 若 要 显示 校 验 信息 ,可 以 在 页 面 上 添加 一 个 ValidationSummary 控 
件 ,并 设 定 其 ShowModelStateErrors 属性 为 true, 代 码 如 下 : 












































<asp:ValidationSummary ShowModelStateErrors = "true" runat = "server" /> 
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Last Name First Name Year |Total Credits 
蝙 辑 删除 |1 |Alexander Carson Freshman 

防 辑 删除 |2 |Alonso Meredith Freshman 

| 蝙 久 删除 |3 Anand IArturo lSophomore 











Barzdukas IGytis Sophomore 
Li Yan Junior 








Justice Peggy Junior 





Norman Laura Senior 
Olivetto Nino Senior 
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图 8-35 学 生 





和 息 更 新 页 面 


再 次 运行 该 程序 ,在 编辑 状态 下 尝试 清空 学 生 的 FirstName 并 保存 ,可 以 看 到 校 验 失败 
信息 显示 在 页 面 上 。 

(6) 添加 一 个 学 生 : GridView 控件 没有 InsertMethod 属性 ;所 以 无 法 实现 插入 数据 的 
功能 ,而 FormView、DetailsView 和 ListView 控件 都 具有 该 属性 ,这 里 将 使 用 FormView 
控件 添加 学 

首先 在 ee aspx 页 面 顶部 放置 一 个 添加 学 生 的 链接 ,代码 如 下 : 


<asp:HyperLink NavigateUrl = "~/AddStudent" Text = "Rdd New Student" runat = "server" /> 


然后 根据 Site. Master 模板 创建 一 个 新 的 Web Form 页 面 , 取 名 为 AddStudent ,在 
MainContent 占 位 符 中 搬 人 以 下 代码 : 


<asp:ValidationSummary runat = "server" ShowModelStateErrors = "true" /> 
<asp:FormView runat = "server" ID= "addStudentForm" 
ItemType = "University. Models. Student" 
InsertMethod = "addStudentForm InsertItem" DefaultMode = "Insert" 
OnItemInserted = "addStudentForm ItemInserted"> 
<InsertItemTemplate> 
<fieldset > 
<ol><asp:DynamicEntity runat = "server" Mode = "Insert" /></ol> 
<asp:Button runat = "server" Text = "Insert" CommandName = "Insert"/> 
<asp:Button runat = "server" Text = "Cancel" 
CausesValidation = "false" OnClick= "cancelButton Click" /> 
</fieldset > 
</InsertItemTemplate> 
</asp:FormView> 


可 以 看 出 ,这 里 同样 使 用 ItemType 属性 设置 了 模型 类 ,然后 使 用 DynamicEntity 控件 
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根据 模型 类 动态 地 构建 表单 界面 。InsertMethod 属性 指定 了 执行 Insert 命令 时 所 要 调 
的 方法 ,OnItemInserted 属性 指定 数据 插入 后 要 执行 的 操作 。 
在 后 台 代码 文件 中 首先 导入 Models 包 : 
































using University. Models; 


然后 加 入 以 下 几 段 代码 : 


public void addStudentForm InsertItem(){ 
Var item = new Student(); 
TryUpdateModel( item); 
if (ModelState. IsValid){ 
using (SchoolContext db = new SchoolContext()){ 
db. Students. Add( item); 
db. SaveChanges( ); 


} 

} 

protected void cancelButton Click(object sender, EventArgs e){ 
Response. Redirect("~/Students"); 

J 

protected void addStudentForm ItemInserted(object sender, 

FormViewInsertedEventArgs e){ 

Response. Redirect("~/Students"); 

} 


第 一 个 方法 为 插入 数据 的 代码 ,使 用 TryUpdateModel 方法 将 表单 输入 传递 给 模型 对 
象 ,然后 判断 模型 对 象 是 否 校 验 通过 , 若 通 过 则 将 新 增 人 员 信 息 保存 到 数据 库 中 。 后 两 个 方 
法 都 是 直接 转 回 学 生 管理 的 首页 。 

再 次 编译 ,执行 该 工程 , 单 击 学 生 列表 页 面 中 顶部 的 新 增 按钮 ,打开 新 增 页 面 ,如 
图 8-36(a) 所 示 。 输 入 学 生 信 息 , 单 击 Insert 按钮 ,TryUpdateModel 方法 会 使 用 FormView 
a it 然后 在 using 块 中 将 模型 对 象 添加 到 Students 集合 ,并 保存 到 数据 

。 在 学 生 列表 页 面 中 可 以 看 到 新 添加 的 记录 ,如 图 8-36(b) 所 示 。 

(7) 数据 过 滤 : 使 用 模型 绑 定 还 可 以 为 后 台 调 用 的 方法 指定 参数 , 而 参数 值 可 以 来 源 
于 控件 Cookie .QueryString、RouteData 等 。 例 如 想 控制 GridView 显示 指定 学 年 的 学 生 
信息 ,也 就 是 要 对 学 生 按 学 年 过 滤 , 学 年 信息 采用 下 拉 列 表 框 选择 ,实现 方法 是 将 列表 框 控 
件 的 值 作为 参数 传递 给 studentsGrid_GetData() 方 法 。 

首先 在 Students. apsx 文件 中 添加 学 年 选择 列表 框 ,代码 如 下 : 














<asp:Label runat = "server" Text = "Show:" /> 
<asp:DropDownList runat = "server" AutoPostBack = "true" ID= "DisplayYear"> 
<asp:ListItem Text ="All" Value= "" /> 
<asp:ListItem Text = "Freshman" /> 
<asp:ListItem Text = "Sophomore" /> 
<asp:ListItem Text = "Junior" /> 
<asp:ListItem Text = "Senior" /> 
</asp:DropDownList > 
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GC | © localhost:50495/Ad 从 


Last Name 





Zhang 
First Name 


Insert || Cancel 
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CG | © Iocalhost50495/Students 











udent 














DiLast NamejFirst Name Year [rotal credits 
澡 吕 出 除 |1 |Alexander |Carson |Freshman | 
| 隔 品 开除 2 |Aonso |Meredith |Freshman |11 
国王 出 除 |3 |Anand Arturo Sophomore|l3 
[| 梧 滞 副 阶 4 |Barzdukas |Gytis |Sophomore|6 
写生 副 隆 5 | an [anor ls 
| 六 泻 开除 6 |Justce |Peggy lJunior |4 
| 于 号 出 除 7 |Norman laura |Senior |4 
| 司 刘 开除 9 |zhang 。 |San |senor |o 
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(a) 添加 页 面 





(b) 添加 后 的 学 生 列表 页 面 


图 8-36 ”添加 学 生 信息 


然后 修改 后 台 文 件 ,将 studentsGrid_GetData() 方 法 改 为 以 下 形式 ， 


public IQueryable < Student > studentsGrid GetData( 
[Control] AcademicYear? displayYear){ 


SchoolContext db = new SchoolContext( 


有 


var query = db. Students. Include(s => s.Enrollments 


if (displayYear != null){ 


.Select(e => e.Course)); 


query = query. Where(s => s.Year == displayYear); 


} 


return query; 





注 


代码 中 的 加 粗 部 分 。 可 以 看 出 该 方法 接收 一 个 名 为 displayYear 的 参数 ,该 参数 值 


从 控件 取得 ,类 型 为 AcademicYear 枚 举 ; 若 displayYear 参数 值 不 为 空 , 则 在 查询 中 加 入 新 
的 过 滤 条 件 “s 一 > s. Year 一 一 displayYear”。 





由 
代码 : 


using System. Web. ModelBinding; 


运行 程序 ,效果 如 图 8-37 所 示 。 


(8) 显示 学 生 选 课 信息 : 下 面 要 添加 一 个 页 下 


于 控件 绑 定 要 引用 System. Web. ModelBinding 


命 


名 空间 ,所 以 还 需要 加 入 以 下 














,来 显示 指定 学 生 的 选课 列表 。 


首先 以 Site. Master 为 母 版 创建 一 个 Web Form 页 面 ,名 为 Courses. aspx, 并 在 





MainContent 部 分 加 入 以 下 GridView 代码 : 
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1 
包 


/Students 





CG | © localhost504: 


Add New Student 
Show | Senior 








IDLast Name|First Name|Year |Total Credits 
编辑 副 阶 7 |Norman |Laura Senior4 
坊 辑 删除 |9 |Zhang San Senior0 
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图 8-37 ” 按 学 年 过 滤 学 生 信息 的 页 面 


<asp:GridView runat = "server" ID = "coursesGrid" 
ItemType = "University. Models. Enrollment” 
SelectMethod = " coursesGrid GetData" AutoGenerateColumns = " false"> 
<Columns > 
<asp:BoundField HeaderText = "Title" DataField = "Course.Title" /> 
<asp:BoundField HeaderText = "Credits" DataField = "Course. Credits" /> 
<asp:BoundField HeaderText = "Grade" DataField = "Grade" /> 
</Columns > 
< EmptyDataTemplate> 
<asp:Label Text = "No Enrolled Courses" runat = "server" /> 
</EmptyDataTemplate> 
</asp:GridView> 








注意 代码 中 的 粗 体 部 分 ,这 里 为 GridView 指定 了 绑 定 到 模型 Enrollment, 并 指定 了 加 
载 数据 的 方法 为 coursesGrid_GetData。 再 请 注意 前 两 个 绑 定 列 , DataField 属性 分 别 为 
Course. Title 和 Course. Credits, 这 是 因为 在 Enrollment 模型 中 包含 了 导航 属性 Course, 从 
中 可 以 获取 到 所 选课 程 的 详细 信息 。 

下 面 更 改 后 台 代 码 , 在 代码 文件 Courses. aspx. cs 中 加 入 以 下 几 条 导入 语句 : 











using University. Models; 
using System. Web. ModelBinding; 
using System. Data. Entity; 


然后 加 入 以 下 coursesGrid_GetData 方法 : 


public IQueryable < Enrollment > coursesGrid GetData 
([QueryString] int? studentID){ 
SchoolContext db = new SchoolContext(); 
var query = db. Enrollments. Include(e => e.Course) 
.Where(e => e. StudentID 





studentID) ; 
return query; 
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该 方法 需要 传人 一 个 studentID 作为 参数 ,使 用 模型 绑 定 ,该 参数 可 以 从 请 求 字符 串 中 
获取 ,所 以 需要 在 调 1 面 中 构造 请 求 字符 串 , 这 里 通过 在 Students. aspx 页 面 中 增加 
一 个 超 链 接 列 来 实现 。 

打开 Students. aspx 页 面 ,在 GridView 的 总 学 分 列 之 后 增加 以 下 超 链接 列 , 






































<asp:HyperLinkField Text = "Courses" 
DataNavigateUrlFormatString = "一 /Courses.aspx?StudentID = {0}" 
DataNavigateUrlFields = "StudentID" /> 


再 次 运行 该 程序 ,进入 学 生 列 表 页 面 ,如 图 8-38(a) 所 示 ; 单 击 某 行 后 面 的 Courses 超 
链接 ,可 以 显示 该 生 的 选课 信息 ,如 图 8-38(b) 所 示 。 


hs -me ner em | i se" 




















Te Creans cmae 
Chensty [3 lo | 

olast NamelFirst Namelvear |Total creans| | 

mm Wt) [Nexanoer |Carson fFreshman 四 二 

Sm Wl [Nonso |Meredmm |Freshman |11 

3 Anang [Aruro |Sophomorels 

Ee |4 |Barzaukas |Gyts |Sophomorels 2017 - 我 的 ASPNET 应 用 程序 

mi |S han or ls 

[mammle ustce |Peogy Lunor | 

ma pi7 INorman lLaura |Senor | 

加 品 开除 3 zhang |San lSenor 
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(a) 学 生 列 表 页 面 (b) 指定 学 生 的 选课 列表 页 面 


图 8-38 查看 学 生 的 选课 信息 


"A 
(8.5 习题 与 上 机 练习 


1. 选择 题 


(1) 为 了 将 页 面 的 PageNum 属性 值 绑 定 到 某 Label 控件 上 显示 ,需要 设置 该 控件 的 
Text 属性 为 ( ) 数 据 绑 定 表达 式 。 


A. <%# PageNum %> B. <%$ PageNum %> 
C. <%# Eval("PageNum") %> D. <%# Bind("PageNum") %> 














(2) 在 使 用 DataView 对 象 进行 筛选 和 排序 等 操作 之 前 必须 指定 一 个 ( ) 对象 作 为 
DataView 对 象 的 数据 来 源 。 
A. DataTable B. DataGrid C. DataRows D. DataSet 
(3) 在 包含 多 个 DataTable 对 象 的 DataSet 中 ,可 以 使 用 ( ) 对 象 来 使 一 个 表 和 另 一 
个 表 相 关联 。 
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A. DataRelation B. Collections C. DataColumn D. DataRows 
(4) 在 GridView 控件 中 设 定 显示 学 生 的 学 号 、 姓 名 、 出 生日 期 等 字段 。 现 要 将 出 生日 
期 设 定 为 短 日 期 格式 , 则 应 将 数据 格式 表达 式 设 定 为 ( ) 。 
A. {0:d} B. {0:c} C. {0:yy-mm-dd} D. {0:p} 
(5) XMLDateSource 与 SiteMapDataSource 数据 源 控件 能 够 用 来 访问 ( 
A. 关系 型 数据 B. 层次 性 数据 C. 字符 串 数据 D. 数值 型 数据 


2. 简 答 题 


(1) 构造 一 个 课程 的 集合 ,每 门 课程 包含 课程 号 ,课程 名 、 学 时 等 数据 项 ; 在 页 面 上 添 
加 一 个 课程 列表 框 ,能 够 显示 集合 中 所 有 课程 的 名 称 ,但 提交 所 选 的 课程 号 。 请 写 出 代码 。 

(2) 在 SqlDataSource 配置 使 用 命令 参数 时 可 以 采用 哪儿 种 方式 获得 参数 值 ? 

(3) 试 比较 GridView 、DetailView、FormView 和 ListView 几 种 控件 的 特点 ,分 别 说 明 
每 种 控件 的 用 途 。 

(4) 在 处 理 GridView 的 行 数据 时 通常 可 以 使 用 哪些 行 命令 ?分 别 会 触发 哪些 行事 件 ? 

(5) 在 GridView 的 模板 列 中 可 以 使 用 哪些 常用 的 模板 类 型 ? 分 别 代 表 什 么 ? 

(6) 在 模板 列 中 使 用 Eval 和 Bind 方法 都 可 以 绑 定 到 数据 项 , 试 比 较 两 种 用 法 的 异同 。 


3, 上 机 练习 





接 第 7 章 的 上 机 练习 题 。 
以 管理 员 身 份 登录 系统 后 进入 用 户 信息 管理 界面 ,实现 用 户 信息 的 编辑 (删除 编辑 、 查 
询 )。 用 GridView 数据 绑 定 控件 实现 。 





MVC 开 发 模式 | 


Web 开发 需要 考虑 用 户 界 面 与 交互 逻辑 、 业 务 处 理 迎 辑 、 数 据 访 问 逻 辑 等 一 系列 问题 ， 
若 采 用 传统 的 Web Form 技术 ,多 数 处 理 将 集中 在 页 面 组 件 中 ,导致 页 面 处 理 逮 辑 过 于 复 
杂 。 对 于 大 型 的 Web 应 用 ,一 般 都 会 选用 合理 的 架构 和 框架 ,大 幅度 提高 开发 效率 。 
Web 开发 中 最 常用 的 架构 方案 是 “三 层 体系 结构 ”, 即 将 软件 结构 分 解 为 表示 层 、 业 务 
层 和 数据 访问 层 。 在 每 一 层 又 可 以 选择 合理 的 开发 模式 和 框架 ,其 中 ,MVC 是 最 经 典 的 表 
示 层 开发 模式 , 它 解 契 了 用 户 界面 与 后 台 处 理 迎 辑 ,利于 搭建 可 扩展 的 Web 应 用 。 












































@.1 MVC 基础 
wo 有 


MVC 代表 Model-View-Controller, 即 "模型 -视图 -控制 器 ”, 它 是 一 种 应 用 非常 广泛 的 
软件 设计 范式 。MVC 将 界面 展示 ,用户 交互 与 后 台 处 理 相 分 离 , 采 用 多 种 组 件 协调 工作 的 
方式 来 组 织 应 用 程序 ,其 核心 组 件 包 括 下 面 三 大 类 。 

(1) 模型 组 件 : 通常 包含 应 用 程序 的 数据 模型 和 处 理 模型 。 

(2) 视图 组 件 : 用 于 显示 模型 数据 ,并 与 用 户 交 互 。 

(3) 控制 器 组 件 : 作为 连接 模型 与 视图 的 桥梁 , 它 要 从 视图 组 件 获 取 请 求 数据 ,委派 模 
型 组 件 处 理 请 求 ,获取 处 理 结果 ,并 将 结果 传递 给 视图 组 件 以 展示 给 用 户 。 


9.1.1 创建 一 个 ASP.NET MVC 项 目 


例 9-1 用 MVC 模板 创建 一 个 ASP.NET 项目 ,学 习 MVC 模式 下 程序 的 运转 流程 。 
首先 创建 一 个 空 的 ASP. NET MVC 项 目 , 并 测试 其 运行 效果 。 
启动 Visual Studio, 新 建 Web 应 用 项 目 , 输 入 名 称 “exam9_1” 并 确定 ,然后 在 打开 的 选 
择 模 板 对 话 框 中 选择 “MVC” 项 目 模 板 , 如 图 9-1 所 示 , 单 击 “ 确 定 ” 按 钮 。 

这 时 Visual Studio 已 经 根据 Web MVC 项 目 模板 创建 好 了 一 个 项 目 , 用 户 可 以 在 解决 
方案 资源 管理 器 中 查看 项 目的 结构 ,并且 可 以 运行 该 项 目 。 

按 F5 键 或 Ctrl 十 F5 组 合 键 执行 该 项 目 ,VS 将 启动 IIS Express 并 部 署 运行 该 Web 
项 目 ,首页 如 图 9-2 所 示 。 

Visual Studio 使 用 BootStrap 作为 客户 端 框 架 ,构造 响应 式 页 面 , 针 对 不 同 的 设备 、 分 
辨 率 和 窗口 大 小 ,页 面 会 自动 适应 ,请 调整 窗口 大 小 以 观察 页 面 的 适应 性 。 
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二 和 二 


Web API Single Page 
Application 


Azure APl App Azure Mobile 
Service 











为 以 下 项 适 加 文件 去 和 核心 引用 : 
Web Forms 同 MyC 同 Web API 


站 适 加 单元 出 坛 LU) 
测试 项 目 各 称 (D: | exam9_LTests 





图 9-1 选择 MVC 项 目 模板 


TE (TE 


ASP.NET 


ASP.NET is a free web framework for building great Web sites and Web applications 
using HTML, CSS and JavaScript. 


Leam more 


Getting started Get more libraries Web Hosting 


ASP NET MVC gves you a powerful pattems。 。 NuGet is a Wee Visual Studio extension that You can easily find a web hosting company 
based way lo build dynamic websites that makes ll easy lo add. remove, and update that offers the night mix of features and price 
enables a clean separation of concems and lpranes and lools In Visual Studio projects. for your applications. 

ges you ul control over markup for 

enloyable_ague development Leam more » Leam more > 


Leam more > 





图 9-2 MVC 模板 项 目的 首页 
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) 


页 面 项 端 是 导航 菜单 , 单 击 “ 主 页 ”“ 关 于 ”和 “联系 方式 ”3 个 导航 链接 并 记录 相应 








的 URL。 
。 主页 : http://localhost: 端 
。 关于 : http://localhost: 端口 
。 联系 方式 : http://localhost: 


单 




















号 / 

口号 

号 /Home/About 

端口 号 /Home/Contact 





击 “ 注 册 ” 与 “登录 ”按钮 记录 相应 的 URL。 








: http://localhost: 端口 


号 /Account/Register 





。 登录 : http://localhost: 端 


9.1.2 分 析 MVC 项目 





口号 /Account/Login 


的 结构 与 运转 流程 








打开 ”解决 方案 资源 管理 器 ”窗口 


有 Models、Views 和 Controllers 3 个 文件 夹 ,分 别 用 于 组 织 模型 .视图 .控制 器 的 相关 组 件 。 





,可 以 看 到 项 目的 目录 结构 ,如 图 9-3 所 示 。 注 意 其 
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闻 Models 
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DD Project Readme.html 
bc Starupcs 
» 中 web.config 


图 93 MVC 项 目的 目录 结构 


1. MVC 路 由 与 URL 映射 
打开 App_Start 文件 夹 ,双击 其 


public class RouteConfig { 


中 的 RouteConfig. cs 文件 ,其 核心 代码 如 下 : 


public static void RegisterRoutes(RouteCollection routes) { 
routes. IgnoreRoute("{resource}. axd/{ * pathInfo}"); 


routes. MapRoute( 
name: "Default"， 


url: "{controller}/{action}/{id}", 
defaults: new { controller = "Home", action = "Index", id = UrlParameter. Optional } 


); 
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在 Web MVC 项 目 启动 时 系统 会 自动 调用 RegisterRoutes 方法 来 注册 路 由 ,这 里 调 
MapRoute 方 法 定义 了 一 条 路 由 映射 ,映射 的 名 称 为 Default, URL 模式 为 {controller) 
{action}/{id} 形 式 , 即 将 一 个 请 求 的 URL 分 解 为 controller、action 和 id 3 段 ; 随后 使 
defaults 项 定义 了 这 3 段 的 默认 值 , 即 controller 部 分 默认 对 应 Home,action 部 分 默认 对 应 
Index,id 部 分 可 以 省 略 ,没有 默认 值 。 

回忆 导航 菜单 中 的 几 个 超 链接 , 当 单 击 “ 主 页 "链接 时 ,其 URL 实际 上 对 应 着 “http:// 
localhost: 端 口号 /Home/Index”; 尝试 在 浏览 器 的 地 址 栏 中 输入 该 URL, 可 以 看 到 同样 打 
开 了 主页 面 。 

理解 MVC 的 关键 在 于 URL 映射 。 当 浏览 器 请 求 某 URL 时 ,MVC 框架 会 根据 映射 
规则 将 URL 分 解 为 controller、action 和 id 3 个 部 分 ,其 中 ,第 一 部 分 确定 了 控制 器 的 类 名 ， 
第 二 部 分 确定 了 要 调用 的 方法 名 ,第 三 部 分 将 作为 参数 传人 被 调 方法 。 例 如 , 当 请 求 URL 
为 “http://localhost: 端口 号 /Home/About” 时 , MVC 框架 获知 控制 器 类 名 为 
HomeController ,调用 的 方法 名 为 About,id 部 分 省 略 , 所 以 未 向 About 方法 传递 任何 
参数 。 























< 






































2. MVC 控制 器 组 件 
打开 Controllers 文件 夹 , 双 击 其 中 的 HomeController. cs 文件 ,代码 如 下 : 


public class HomeController : Controller { 

public ActionResult Index(){ 
return View( ); 

} 

public ActionResult About() { 
ViewBag. Message = "Your application description page."; 
return View( ); 

public ActionResult Contact(){ 
ViewBag. Message = "Your contact page."; 
return View( ); 


1 


顾名思义 ,该 控制 器 类 将 处 理 所 有 URL 的 Controller 部 分 映射 为 Home 的 请 求 ; 其 中 
又 含有 3 个 返回 值 类 型 为 ActionResult 的 方法 ,这 些 方 法 被 称 为 action 方法 ,显然 这 些 方 
法 与 URL 映射 中 的 action 部 分 对 应 。 很 容易 理解 : 当 请 求 的 URL 为 “http://localhost: 
端口 号 /Home/About” 时 ,MVC 框架 会 自动 导航 到 HomeController 中 的 About 方法 处 理 
该 请 求 。 

在 action 方法 中 通常 需要 做 3 项 工作 ,一 是 从 请 求 中 获取 输入 数据 ,二 是 处 理 数据 并 准 
备 输 出 到 视图 中 的 数据 ,三 是 将 响应 导航 到 输出 视图 ,并 将 准备 好 的 数据 传递 给 该 视图 。 本 
例 的 About 方 法 只 做 了 后 两 项 工作 . 它 将 要 输出 的 数据 保存 到 ViewBag 容器 中 ,然后 导航 
到 输出 视图 。 

ViewBag 是 一 个 容器 ,用 于 在 控制 器 和 视图 之 间 共 享 数 据 , 数 据 以 “名 - 值 对 ”的 形式 进 
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行 包 装 。 这 里 将 输出 内 容 “Your application description page. ”以 键 名 Message 保存 在 
ViewBag 容器 中 ,将 来 在 视图 页 面 中 就 可 以 通过 同样 的 键 名 取出 该 键 值 。 

最 后 一 条 语句 为 return View();”, 它 将 根据 URL 映射 来 确定 响应 页 面 , 然 后 导航 到 
该 页 面 ; 该 URL 的 action 部 分 为 About, 意 味 着 输出 视图 为 About. cshtml。 














3. MVC 视图 组 件 
打开 Views 文件 夹 ,再 打开 其 中 的 Home 文件 夹 ,可 以 看 到 3 个 网 页 文件 , 即 About. 


cshtml、Contact. cshtml 以 及 Index. cshtml。 很 显然 ,这 3 个 视图 文件 正好 与 导航 栏 上 的 3 
个 超 链 接 相对 应 。 


双击 打开 About. cshtml 文件 ,其 核心 代码 如 下 : 


@{ ViewBag.Title = "About"; } 

<h2 >@ViewBag. Title.</h2 > 

<h3 >@ViewBag. Message </h3 > 

<p>Use this area to provide additional information.</p> 


第 1 行 在 ViewBag 中 添加 了 一 个 Title 键 ,其 值 为 About; 第 2、 第 3 行 分 别 以 二 级 标 
题 和 三 级 标题 的 格式 显示 Title 和 Message 的 键 值 。Message 的 键 值 从 哪里 来 呢 ? 大 家 很 
容易 想到 在 Controller 中 曾经 向 ViewBag 写 信 了 该 键 ,MVC 框架 就 是 通过 ViewBag 在 控 
制 器 和 视图 之 间 传 递 数 据 。About. cshtml 页 面 的 显示 结果 如 图 9-4 所 示 。 





ol pttpy/localhost PD ~ SO X13 About - 59 AspneT gg- x a 


About. 


Your application description page. 


Use this area to provide additional information. 














日 2017 -我 的 ASP.NET 应 用 程序 

















图 9-4 About 页 面 的 显示 效果 


4. MVC 视图 组 件 的 页 面 模板 

当 单 击 各 个 导航 链接 时 ,打开 的 所 有 响应 页 面 风 格 一 致 .结构 基本 相同 ,这 是 如 何 做 到 
的 呢 ? 关键 是 使 用 了 布局 页 面 。 双 击 Views 文件 夹 下 面 的 _ViewStart, cshtml 文件 ,查看 
其 代码 如 
































@{ Layout = "~ /Views/Shared/_Layout. cshtml"; 
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可 以 看 出 ,在 加 载 视 图 时 MVC 框架 自动 选择 了 一 个 布局 文件 , 即 Shared 文件 夹 下 面 
的 _Layout. cshtml。 打 开 该 文件 ,代码 如 下 : 


<! DOCTYPE html > 
<html> 
<head> 
<meta http— equiv = "Content - Type" content = "text/html; charset = utf - 8"/> 
<meta charset = "utf - 8" /> 
<meta name = "viewport" content = "width = device - width, 
initial- scale=1.0"> 
<title>@ViewBag. Title - 我 的 ASP. NET 应 用 程序 </title> 
@styles. Render("~ /Content/css") 
@Scripts.Render(" 一 /bundles/modernizr") 
</head> 
<body > 
<div class = "navbar navbar - inverse navbar — fixed - top"> 
<div class = "container"> 
<div class = "navbar - header"> 
<button type = "button" class = "navbar - toggle" 
data ~ toggle = "collapse" data - target = 
< span class = "icon— bar"></span> 
< span class = "icon- bar"></span> 
< span class = "icon- bar"></span> 





.navbar - collapse"> 


</button> 
@Html.RctionLink(" 应 用 程序 名 称 "，"Index"，"Home"， 
new { area = "" }, new { @class = "navbar— brand" }) 
</div> 


<div class = "navbar - collapse collapse"> 
<ul class = "nav navbar - nav"> 
<1i>@Html.ActionLink(" 主 页 ", "Index", "Home")</1i> 
<1i>@Html.ActionLink(" 关 于 ","About", "Home")</1i> 
<1i>@Html. ActionLink(" 联 系 方式 ",，"Contact"， 
"Home")</1i> 





</ul> 
@Htm1.Partial("” LoginPartial") 
</div> 
</div> 
</div> 
<div class= "container body— content"> 
@RenderBody( ) 
<hr /> 
<footer > 
<p>&copy; @DateTime. Now. Year 一 我 的 ASP. NET 应 用 程序 </p> 
</footer> 
</div> 
@Scripts. Render("~ /bundles/jquery") 
@Scripts. Render("~ /bundles/bootstrap") 
@RenderSection("scripts", required: false) 
</body > 
</html > 
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该 文件 定义 了 所 有 视图 页 面 的 整体 布局 ,详情 读者 可 深入 研究 。 注 意 其 中 加 粗 的 一 行 
代码 : 





@RenderBody( ) 


该 代码 负责 将 当前 视图 中 定义 的 内 容 插入 到 布局 中 ,也 就 是 说 ,About. cshtml 中 定义 
的 内 容 插 入 到 该 处 ,这 样 才 生成 了 完整 的 响应 页 面 。 


5. 总 结 MVC 的 运转 流程 
这 里 以 “关于 ”链接 为 例 , 单 击 该 链接 时 向 服务 器 端 请 求 以 下 URL: 














http://localhost: 端 口号 /Home/About 


该 请 求 被 MVC 框架 截获 ,根据 URL 模式 被 拆 分 为 两 个 部 分 ,Controller 为 Home、 
Action 为 About。 根 据 映射 结果 , MVC 框架 会 调用 HomeController 中 的 About 方 法 来 处 
理 请 求 ; 在 About 方法 中 准备 好 响应 数据 ,并 将 甚 压 和 人 ViewBag 容器 ,然后 将 响应 定向 到 
About. cshtml 文件 ; MVC 框架 在 加 载 该 文件 时 首先 加 载 页 面 布局 文件 _Layout. cshtml， 
然后 将 About. cshtml 的 内 容 插 入 到 布局 中 的 相应 位 置 ,形成 完整 的 输出 页 面 ,并 最 终 显示 
给 用 户 。 


6.2 模型 与 控制 器 组 件 的 使 用 


对 于 数据 库 应 用 ,通常 结合 MVC 模式 与 实体 框架 ,借助 Visual Studio 工具 搭建 程序 基 
架 , 从 而 实现 快速 有 序 的 开发 。 下 面 以 一 个 简单 的 数据 库 应 用 为 例 来 介绍 MVC 开发 中 的 
模型 组 件 与 控制 器 组 件 的 设计 。 

例 9-2 开发 一 个 简单 的 影片 管理 程序 ,使 其 能 够 实现 影片 信息 的 增 、 删 、 改 、 查 功能 。 

首先 创建 一 个 ASP. NET MVC 项 目 , 或 打开 例 9-1 创建 的 项 目 , 然 后 为 其 创建 模型 组 
件 与 控制 器 组 件 ,并 分 别 介绍 这 两 种 组 件 的 用 法 。 


9.2.1 创建 模型 组 件 


模型 组 件 通 常 代表 数据 库 中 的 数据 ,并 提供 访问 数据 的 方法 。 本 例 要 建立 影片 的 模型 
以 及 访问 影片 数据 的 方法 ,这 对 应 两 个 类 , 即 实体 类 和 DbContext 类 。 

1. 建立 实体 类 

在 解决 方案 资源 管理 器 中 打开 Models 文件 夹 并 右 击 ,选择 “添加 ”一 “类 ”命令 ,在 弹出 
的 对 话 框 中 输入 名 称 "Movie”, 然 后 单 击 * 添 加 ”按钮 创建 Movie 实体 类 。 

在 Movie 类 中 定义 实体 属性 ,代码 如 下 : 











public class Movie { 
public int ID { get; set; } 
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public string Title { get; set; } 
public DateTime ReleaseDate { get; set; } 
public string Genre { get; set; } 
public decimal Price { get; set; } 


2. 建立 DbContext 类 


在 解决 方案 资源 管理 器 中 右 击 Models 文件 夹 ,选择 “添加 ”一 “新 建 项 ”命令 ,在 弹出 的 
对 话 框 中 选择 Visual C# 一 Web 一 “数据 ”一 “ADO. NET 实体 数据 模型 ”, 输 入 名 称 
“MovieDB”, 如 图 9-5 所 示 ,然后 单 击 “ 添 加 ”按钮 。 
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J 排序 仿 到: 扶 但 -] 合作 理 幸 已 雪 革 机 Cl +) Pp- 
4 Visual Ce :Visusl Ce 
» Web 用 于 创建 ADOJNET 实体 你 委 模 型 的 项 目 
Windows Forms 钨 tfsr Doconen sam Visual cs 现 
WPF 
和 项 人 钢 ferDbconen ts Visual ce 
ft 
全 unansat 关 Visual cs 
Reporang 
Siveriight 国 :os sa* Vesual cm 
SQL Server 
Workflow 品 XML 恒 构 Visual ce 
» Wl DD mx Visual cs 
2A xs xf Visual cz 
国 >ss Visual cs 
2 
SKN MovieDB 





图 9-5 “添加 新 项 "对话 框 


在 弹出 的 “实体 数据 模型 向 导 ” 对 话 框 中 选择 “ 空 Code First 模型 ”, 如 图 9-6 所 示 , 单 击 
“完成 ”按钮 ,可 以 看 到 系统 创建 了 MovieDB. cs 文件 ,核心 代码 如 下 : 





public class MovieDB : DbContext { 

public MovieDB() : base("name = MovieDB") { } 

// public virtual DbSet < MyEntity> MyEntities { get; set; } 
} 














这 就 是 实体 框架 要 用 到 的 数据 访问 类 的 代码 框架 ,注意 其 中 被 注释 掉 的 代码 , 它 演示 了 
如 何 为 数据 访问 类 定义 属性 。 数 据 访问 类 的 作用 是 在 数据 库 中 的 表 和 程序 代码 中 的 实体 集 
合 之 间 建 立 关 联 , 并 能 实现 自动 映射 , 即 在 需要 时 自动 从 数据 库 表 中 提取 数据 形成 实体 集 











300 


ASP .NET Web 应 用 开发 技术 ( 第 2 版 ) 





实体 数据 模型 向 导 X 
国 - 选 译 模 型 内 容 


模型 格 包 含 志 些 内 容 ?(W) 
和 东 室 室 


来 窒 数 据 库 的 空 EF 设计 器 来 自 数据 库 的 
EF 设计 器 Code First 











之 后 , 可 以 从 窑 的 模型 生成 数据 库 。 





创建 一 个 二 的 Code First 











[Cs [CE Cm 











图 9-6 “实体 数据 模型 向 导 ” 对 话 框 


合 ,或 者 自动 将 实体 集合 上 的 所 有 修改 持久 化 到 数据 库 。 为 了 做 到 这 一 点 ,用 户 只 需要 在 数 
据 访问 类 中 为 实体 定义 DbSet 类 型 的 属性 ,这 样 系统 会 针对 该 属性 自动 生成 数据 库 增 、 删 、 
改 、 查 的 方法 。 本 例 要 将 Movie 实体 集中 的 数据 映射 到 数据 库 表 中 ,需要 定义 以 下 DbSet 
属性 : 


public virtual DbSet <Movie> movies { get; set; } 
至 此 ,实体 类 Movie 和 数据 访问 类 MovieDB 已 定义 完成 。 在 解决 方案 资源 管理 器 中 右 


击 项 目 , 选 择 * 生 成 ”, 系 统 会 根据 实体 定义 自动 配置 数据 库 连 接 字符 串 , 并 保存 到 主 配置 文 
件 Web. config 中 ,如 下 所 示 : 








<connectionStrings > 
<add name = "MovieDB" connectionString = "data source = (LocalDb) 
\MSSQLLocalDB; initial catalog = exam9. Models. Movie; 
integrated security = true; MultipleActiveResultSets = true; 
App = EntityFramework" providerName = "System.Data. SqlClient" /> 
</connectionStrings> 





本 例 中 系统 默认 使 用 SQL Server LocalDb 作为 后 台数 据 库 ,创建 了 名 为 MovieDB 的 


FF NS 
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连接 字符 串 , 用 户 可 以 根据 实际 情况 更 改 配置 ,这 里 不 做 修改 。 在 本 例 运行 时 EF 框架 会 根 
据 实体 定义 自动 到 数据 库 中 建 表 。 


9.2.2 创建 控制 器 组 件 


(1) 在 解决 方案 资源 管理 器 中 右 击 Controller 文件 夹 ,选择 “添加 ”一 “控制 器 ”命令 ,在 
打开 的 “添加 基 架 ”对 话 框 中 选中 “包含 视图 的 MVC5 控制 器 (使 用 Entity Framework)”, 然 
后 单 击 “ 添 加 ”按钮 。 

(2) 在 弹出 的 对 话 框 中 选择 模型 类 及 数据 上 下 文 类 ,保持 几 个 视图 选项 被 选中 ,控制 器 
类 名 称 不 变 , 如 图 9-7 所 示 , 单 击 * 添 加 ?按钮 完成 程序 基 架 的 创建 。 











添加 控制 器 


模型 类 (M): Movie (exam9 .Models) 


数据 上 下 文 类 (D): | MovieDB (exam9.Models) “| 加 | 
口 使用 异步 控制 器 反 作 (A) 

视图 : 

加 生成 山 国 WO 

回 引用 脚本 库 (R) 

[My| 使 用 布局 页 (U): 


(如 果 在 Razor _viewstart 文件 中 设置 了 此 选项 ， 则 填空) 


控制 出 名 称 (Q): MoviesController 




















图 9-7 “添加 控制 器 "对话 框 


至 此 VS 已 经 根据 模型 创建 了 完整 的 数据 访问 基 架 ,不 需要 编写 任何 代码 。 按 Ctrl 十 
F5 组 合 键 运行 程序 ,在 浏览 器 地 址 栏 中 补充 控制 器 的 名 称 Movies, 即 访 问 URL 为 
“http://localhost: 端 口号 /Movies” 的 页 面 ,如 图 9-8 所 示 。 








le lo | 
Index - 我 的 ASPJ.NET 二 x — ha 
所 CO localhost 会 $ 
Index 
Title ReleaseDate Genre Price 
9 2017 - 我 的 ASPNET 应 用 程序 





图 9-8 电影 信息 列表 显示 页 面 
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这 是 针对 电影 实体 的 列表 显示 页 面 , 单 击 Create New 链接 可 以 打开 新 建 页 面 输入 影片 























信息 ,如 图 9-9 所 示 。 相 应 的 还 有 影片 的 详情 页 面 、 修 改 页 











面 及 删除 页 面 。 至 此 所 有 页 面 都 














已 创建 ,所 有 功能 都 能 正常 运行 ,针对 Movie 实体 已 生成 完整 的 增 、 删 \ 改 、 查 程序 。 
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图 9-9 添加 电影 信息 页 面 


9.2.3 程序 结构 与 运转 机 制 


在 解决 方案 资源 管理 器 中 打开 Controllers 文件 夹 ， 
双击 打开 MoviesController. cs 文件 ,可 以 看 到 该 类 的 结 
构 如 图 9-10 所 示 。 其 中 db 属性 引用 DbContext 对 象 ， 
依靠 实体 框架 实现 ORM 功能 ; 注意 观察 返回 值 类 型 为 
ActionResult 的 几 个 方法 ,它们 被 称 为 action 方法 ,用 
于 处 理 客户 端 请 求 ,实现 增 \ 删 、 改 、 查 功能 ,并 导航 到 输 
出 页 面 。 下 面 逐 一 分 析 各 action 方法 。 

(1) Index 方法 : 处 理 列表 显示 所 有 Movie 的 请 
求 。 代 码 如 下 : 





public ActionResult Index() { 
return View( db. movies. ToList( )); 


ji 

















当 用 户 在 浏览 器 地 址 栏 中 输入 “http://localhost: 











Cc ler.cs 
4 $3 MoviesController 
© db : MovieDB 
®@ Index0 : ActionResult 
Detailsfint?) : ActionResult 
Create0 : ActionResult 
Create(Movie) : ActionResult 
Edit(int?) ; ActionResult 
Edit(Movie) : ActionResult 
Delete(int?) : ActionResult 
DeleteConfirmed(int) : ActionResult 
Dispose(boo)) : void 


Doo000000 


图 9-10 ”MoviesController 类 的 结构 


端口 号 /Movies” 请 求 时 ,根据 


RouteConfig. cs 中 配置 的 映射 规则 ,将 URL 分 解 为 controller= Movies、action 二 Index、 
id 二 null 3 部 分 ,于 是 MVC 框架 会 将 请 求 委 派 给 MoviesController 中 的 Index 方法 处 理 ; 
在 Index 方法 中 调用 DbContext 对 象 的 movies 属性 访问 数据 库 获得 所 有 Movie 对 象 , 并 将 
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该 列表 包装 到 响应 页 面 中 返回 ; 由 于 action 二 Index, 这 也 确定 了 响应 页 面 为 Index. cshtml， 
在 该 页 面 中 会 加 载 列 表 数 据 , 最 终 显 示 给 用 户 。 

(2) 以 GET 方式 请 求 的 Create 方法 : 处 理 创 建新 影片 的 请 求 。 

当 用 户 在 列表 页 面 中 单 击 Create New 链接 时 ,以 GET 方式 请 求 以 下 URL: 





























http://localhost: 端 口号 /Movies/Create 





根据 URL 映射 规则 ,controller 二 Movies、action 二 Create, 于 是 调用 MoviesController 
中 的 Create 方法 ,代码 如 下 : 


// GET: Movies/Create 
public ActionResult Create() { return View(); | 


这 里 直接 根据 Create. cshtml 构造 了 响应 页 面 ,用 于 输入 影片 信息 。 

(3) 以 POST 方式 请 求 的 Create 方法: 用 于 保存 用 户 新 建 的 影片 信息 。 

当 用 户 在 新 建 页 面 中 输入 影片 的 信息 后 如 图 9-9 所 示 , 单 击 Create 按钮 ,表单 将 以 
POST 方式 提交 ,其 URL 与 GET 方式 相同 ,但 包含 表单 数据 。 请 求 处 理 的 代码 如 下 : 


// POST: Movies/Create 
[HttpPost] 
public ActionResult Create( [Bind(Include = 
"ID, Title, ReleaseDate, Genre, Price")] Movie movie) { 
if (ModelState. IsValid) { 
db. movies. Add(movie); 
db. SaveChanges( ); 
return RedirectToAction("Index"); 
b 


return View( movie); 


注意 在 方法 前 使 用 了 “LHttpPostj" 注 解 ,指明 该 方法 只 能 在 POST 请 求 时 被 触发 。 该 
方法 需要 传人 一 个 Movie 实体 做 参数 ,MVC 框架 会 从 POST 请 求 中 获取 请 求 参数 ,并 包装 
成 一 个 Movie 对 象 传 人 Create 方法 ; 为 安全 生成 Movie 对 象 , 使 用 了 LBindj 注 解 来 进行 模 
型 检测 ,以 确定 请 求 中 是 否 包含 ID、Title、ReleaseDate、Genre、Price 等 参数 ; 若 检 测 通过 ， 
则 ModelState. IsValid 的 值 为 true, MVC 框架 会 将 传人 的 Movie 对 象 添加 到 DbContext 
的 movies 列表 中 ,然后 调用 DbContext 的 SaveChanges 方法 将 更 新 内 容 保存 到 数据 库 中 ， 
最 后 重 定向 到 "Index”action ,以 输出 电影 列表 页 面 , 如 图 9-11 所 示 ; 若 模型 检测 未 通过 , 则 
说 明 用 户 输入 的 数据 不 全 ,重新 返回 Create 页 面 ,并 将 当前 的 Movie 对 象 传递 过 去 以 便 填 
充 表 单 控件 。 

(4) Details 方法 : 用 于 处 理 显示 一 条 记录 详情 的 请 求 。 代 码 如 下 : 



































// GET: Movies/Details/5 
public ActionResult Details(int? id) { 
if (id == null) { 
return new HttpStatusCodeResult( HttpStatusCode. BadRequest) ; 


并 
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: 

Movie movie = db.movies.Find(id); 

if (movie == null) { return HttpNotFound( ); } 

return View(movie); 

} 
西 - D x 

1 Index - 我 的 ASPNETE x 
< CC | © localhost58762/Movies 本 女 





Index 
Create New 

Title ReleaseDate Genre Price 

The Lion King 2010/1/1 0-00-:00 Cartoon 10.00 Edgit | Details | je 
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图 9-11 添加 记录 后 的 电影 列表 页 面 
当 用 户 在 Index 页 面 中 单 击 电影 后 面 的 Details 链接 时 会 发 出 以 下 GET 请 求 ， 


http://localhost: 端 口号 /Movies/Details/1 


最 后 的 “1? 为 该 电影 的 id 号。 根据 URL 映射 ,该 请 求 会 由 MoviesController 中 的 
Details 方法 处 理 , 同 时 将 id 作为 参数 传人 。 注 意 方法 原型 中 的 id 参数 ,其 类 型 为 "int ?”， 
这 表示 该 参数 可 以 省 略 , 即 调用 Details 方法 时 可 以 传递 一 个 整 型 的 id, 也 可 以 不 传递 任何 
数据 。 在 方法 体 中 首先 检测 id 参数 是 否 为 空 , 若 不 为 空 则 根据 i 
生成 的 Movie 对 象 传递 给 输出 页 面 Details. cshtml, 显示 该 电影 的 
为 空 ,或 根据 id 无 法 查找 到 对 应 的 电影 , 则 跳 转 到 相应 的 错误 页 面 。 

(5) GET 请 求 的 Edit 方法 : 用 于 处 理 数 据 编辑 请 求 ,显示 指定 的 电影 信息 以 供用 户 
编辑 。 

当 用 户 在 Index 页 面 中 单 击 电 影 后 面 的 Edit 链接 时 会 以 GET 方式 请 求 以 下 URL: 








http://localhost: 端 口号 /Movies/Edit/1 


很 显然 ,该 请 求 会 由 MoviesController 中 的 Edit 方法 处 理 , 代 码 如 下 : 


// GET: Movies/Edit/5 
public ActionResult Edit(int? id) { 
if (id == null){ 
return new HttpStatusCodeResult( HttpStatusCode. BadRequest); 


} 


! 
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Movie movie = db.movies.Find(id); 


if (movie == null) { 
return HttpNotFound( ); 


! 


return View( movie); 


URL 中 的 id 部 分 会 被 传人 该 方法 。 如 果 id 不 为 空 , 则 根据 id 检索 该 电影 ; 车 检索 到 ， 
则 将 该 Movie 对 象 传人 Edit. cshtml 视图 ,显示 该 电影 的 信息 供用 户 编辑 ,否则 返回 相应 的 
错误 页 面 。 
(6) POST 请 求 的 Edit 方法 : 用 于 保存 编辑 过 的 数据 。 





a 











局 


式 如 下 : 








户 在 编辑 页 面 中 更 改 了 数据 后 单 击 Save 按钮 ,将 以 POST 方式 提交 表单 ,URL 格 


http://localhost: 端 口号 /Movies/Edit/1 


对 应 的 请 求 处 理 方法 代码 如 下 : 


// POST: Movies/Edit/5 

[HttpPost] 

public ActionResult Edit([Bind(Include = 

"ID, Title, ReleaseDate, Genre, Price")] Movie movie) { 

if (ModelState. IsValid) { 
db. Entry(movie). State = EntityState.Modified; 
db. SaveChanges( ); 
return RedirectToAction("Index"); 


. 


} 


return View(movie); 


与 POST 方式 的 Create 请 求 类 似 , 这 里 先 根据 POST 参数 生成 Movie 实体 对 象 ,并 进 


行 模型 有 效 性 检测 ; 若 检 测 通 过 , 则 在 Context 中 设置 当前 对 象 的 状态 为 “已 修改 ”, 再 调 
SaveChanges 方法 保存 修改 ,最 后 重 定 向 到 Index 页 面 。 

代码 行 ,db. Entry(movie) 能 从 DbContext 中 获取 Movie 实体 集中 的 当 痛 
象 ,该 行将 当前 Movie 实体 的 状态 设置 为 Modified ,进而 在 DbContext 对 象 上 调 
nges 方法 ,将 所 有 实体 集 上 的 修改 保存 到 数据 库 。 

GET 请 求 的 Delete 方法 : 用 于 处 理 删 除 请 求 , 并 打开 删除 确认 页 面 。 


注 
Movie 刀 
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的 Delete 链接 时 请 求 的 URL 如 下 : 


http://localhost: 端 口号 /Movies/Delete/1 





请 求 处 理 的 


代码 如 下 : 


// GET: Movies/Delete/5 
public ActionResult Delete(int? id) { 


Am 
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if (id == null) { 
return new HttpStatusCodeResult (HttpStatusCode. BadRequest); 
} 
Movie movie = db.movies.Find(id); 
if (movie == noll){ 
return HttpNotFound(); 
} 


return View(movie); 


很 显然 ,id 将 作为 参数 传人 ,在 方法 体 中 根据 id 定位 该 记录 ,生成 Movie 对 象 传人 输出 
视图 Delete. cshtml, 最 后 显示 删除 确认 页 面 ,如 图 9-12 所 示 。 


























—_ ee 
[¢Sl htpy//localhost58762/Movies/Delete/! PD-BO xj Delete - 我 的 ASPINET 应 x lel 
闪 
rr 
Delete 


Are you sure you want to delete this? 
Movie 


Tite The Lion King 
ReleaseDate 2000/1/1 0.0000 
Genre Cartoon 
Price 100.00 


Delete | Back to List 
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图 9-12 删除 确认 页 面 


(8) POST 请 求 的 Delete 方 法 : 用 于 删除 指定 的 一 条 数据 。 
在 删除 确认 页 面 中 , 当 用 户 单 击 了 Delete 按钮 后 将 真正 删除 该 记录 ,其 请 求 URL 
如 下 : 


http://localhost: 端 口号 /Movies/Delete/1 


请 求 处 理 的 代码 如 下 : 


// POST: Movies/Delete/5 

[HttpPost, ActionName("Delete")] 

public ActionResult DeleteConfirmed(int id) { 
Movie movie = db.movies.Find(id); 
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db. movies. Remove( movie); 

db. SaveChanges( ); 

return RedirectToAction("Index"); 
} 


在 该 方法 中 首先 根据 传人 的 id 定位 该 Movie, 然 后 在 DbContext 的 movies 实体 集合 中 
删除 该 Movie, 并 将 更 改 持久 化 到 数据 库 , 最 后 重 定 向 到 Index 页 面 。 

注意 代码 加 粗 部 分 ,由 于 方法 名 为 DeleteConfirmed ,与 路 由 映射 中 的 action 部 分 不 一 
致 ,所 以 需要 一 行 注解 进行 说 明 , ActionName ("Delete") 表 示 该 方法 用 于 处 理 action 为 
Delete 的 请 求 。 
































@.3 视图 组 件 的 使 用 
A 


MVC 模式 采用 了 关注 点 分 离 的 策略 ,将 业务 处 理 逻 辑 从 页 面 分 离 出 来 ,封装 到 控制 器 
组 件 , 而 视图 组 件 则 封装 了 应 用 程序 与 用 户 交 互 的 表示 层 人 逻辑 。 
在 MVC 开发 中 ,视图 组 件 通 常 不 会 采用 Web Form 模型 ,而 是 采用 Web Page 模型 , 它 
基于 HTML 模板 ,通过 在 其 中 嵌入 代码 来 生成 动态 内 容 。 视 图 组 件 采 用 Razor 语法 书写 代 
码 ,由 Razor 引擎 负责 解释 运行 。 

关于 Web Page 的 详细 介绍 请 参阅 以 下 文档 : 





https://docs. microsoft. com/en - us/aspnet/web - pages/index 


关于 Razor 语法 的 相关 知识 请 参阅 以 下 文档 : 


https://docs. microsoft. com/en - us/aspnet/core/mvc/views/razor 


在 解决 方案 资源 管理 器 中 打开 Views 下 的 Movies 文件 夹 , 可 以 看 到 VS 利用 系统 基 架 
自动 生成 的 几 个 视图 文件 。 

。 Index. cshtml: 列表 显示 电影 信息 的 视图 文件 。 

。 Details. cshtml: 显示 指定 电影 详细 信息 的 视图 文件 。 

。 Create. cshtml: 创建 新 电影 的 视图 文件 。 

。 Edit, cshtml: 修改 指定 电影 信息 的 视图 文件 。 

。 Delete. cshtml: 确认 删除 指定 电影 的 视图 文件 。 

视图 文件 以 . cshtml 为 扩展 名 ,通常 存放 在 应 用 程序 目录 下 的 Views 文件 夹 中 ,并 且 针 
对 每 个 控制 器 会 生成 一 个 相应 的 文件 夹 ,针对 各 个 action 会 生成 相应 的 视图 文件 。 

除了 这 种 与 action 相关 的 视图 文件 外 ,ASP. NET 还 支持 布局 视图 (Layout) 、 局 部 视图 
(Partial Views) 以 及 其 他 一 些 特殊 的 视图 类 型 。 


9.3.1 定义 视图 的 整体 外 观 
一 般 来 说 ,一 个 Web 项 目的 所 有 页 面 都 会 采用 一 致 的 样式 ,在 Web Form 模型 中 使 
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Master Page 来 创建 一 致 的 外 观 , 而 Razor 引擎 使 用 布局 视图 (Layout 模板 ) 来 统一 外 观 。 
在 解决 方案 资源 管理 器 中 依次 打开 Views 和 Shared 文件 夹 ,可 以 看 到 _Layout. cshtml 

文件 ,注意 文件 名 前 面 带 了 下 夯 线 “_”, 表 示 该 文件 为 布局 视图 ,不 能 直接 在 浏览 器 中 请 求 ， 

而 只 能 被 其 他 文件 所 引用 。 本 项 目 中 所 有 与 action 相关 的 视图 都 引用 了 该 布局 文件 。 

打开 _Layout. cshtml, 可 以 看 出 页 面 内 容 由 两 个 部 分 构成 ,一 是 静态 的 HTML 代码 ,二 

是 用 Razor 语法 书写 的 C# 代码。Razor 元 素 的 标记 是 “@ "符号 , 它 可 用 于 引导 一 个 行内 的 

表达 式 ,或 者 一 个 单行 的 语句 块 , 或 者 多 行 的 语句 块 。 请 看 以 下 代码 : 















































<title>(@ViewBag. Title - 我 的 ASP. NET 应 用 程序 </title> 


该 行 代码 在 title 标签 中 加 入 了 一 个 Razor 表达 式 “@ViewBag. Title”, 从 ViewBag 中 
获取 Title 键 值 并 和 输出。 
再 看 以 下 代码 : 
@Html. ActionLink(" 应 用 程序 名 称 "，" Index"，"Home"，new { area = "" }， 
new { @class = "navbar- brand" }) 


该 代码 将 调用 HtmlHelper 对 象 的 ActionLink 扩展 方法 创建 一 个 导航 链接 。 该 方法 
的 第 一 个 参数 为 超 链接 的 显示 文本 ,第 二 个 参数 代表 action, 第 三 个 参数 代表 controller, 最 
后 两 个 参数 控制 显示 样式 。 该 链接 的 显示 文本 为 “应 用 程序 名 称 ”, 单 击 该 链接 时 将 请 求 以 
下 URL: 


http://localhost: 端 口号 /Home/Index 
对 该 行 代码 进行 修改 : 


@Html. ActionLink(" 我 的 MVC 应 用 "，"Index"，"Home"，new { area = ""”}， 
new { @class = "navbar— brand" }) 


保存 修改 , 按 Ctrl 十 F5 组 合 键 运行 程序 ,可 以 看 到 所 有 页 面 的 标题 链接 文字 都 变 成 了 
“我 的 MVC 应 用 ”。 
下 面 在 导航 菜单 上 加 入 影片 管理 的 链接 ,注意 下 面 的 代码 : 





<1i>@Html. ActionLink( "联系 方式 ", "Contact", "Home")</1i> 








在 该 行 的 后 面 再 加 上 一 行 代码 : 








<1i>@Html. ActionLink(" 影 片 管理 ", "Index", "Movies")</1li> 





保存 文件 ,刷新 页 面 ,可 以 看 到 导航 栏 上 出 现 了 “影片 管理 ”的 链接 , 单 击 该 链接 就 可 以 
打开 影片 列表 页 面 ,如 图 9-13 所 示 。 
注意 布局 文件 中 的 以 下 代码 : 


@Html. Partial(" LoginPartial") 
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Title ReleaseDate Genre Price 
The Lion King 2000/1/1 0:00:00 Cartoon 100.00 Edit | Details | Delete 
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图 9-13 更改 布局 视图 后 的 列表 页 面 


这 里 使 用 HtmlHelper 对 象 插入 了 一 个 局 部 视图 ”_ LoginPartial”。 打 开 “Views\ 
Shared” 目 录 下 的 局 部 视图 文件 ”LoginPartial. cshtml” ,代码 如 下 : 


@using Microsoft, RspNet. Identity 
@if (Request. IsAuthenticated){ 
using (Html.BeginForm("LogOff", "Account", FormMethod. Post, 
new { id = "logoutForm", @class = "navbar ~ right" })) { 
@Html. AntiForgeryToken( ) 


<ul class = "nav navbar — nav navbar — right"> 


x 
@Html. ActionLink(" 你 好 ," + User. Identity.GetUserName() + "!","Index", 
"Manage", routeValues: null, htmlAttributes: new { title = "Manage" }) 

</1i> 


<1i><a href = "javascript:document. getElementById( 'logoutForm') 
. submit()"> 注销 </a> </1i> 


</ul> 
} 
} 
else{ 
<ul class = "nav navbar — nav navbar — right"> 
<1i>@Html. ActionLink(" 注 册 ",， "Register", "Account", routeValues: 
null, htmlAttributes: new { id = "registerLink" })</1li> 
<1i>@Html. ActionLink(" 登 录 "，"Login"，"Rccount"，routeValues : 
null, htmlAttributes: new { id = "loginLink" })</1i> 
</ul> 
} 

















可 以 容易 地 看 出 ,该 局 部 视图 调用 了 . NET 框架 的 认证 和 身份 校 验 机 制 ,首先 判断 用 户 
已 经 登录 , 若 已 登录 , 则 显示 欢迎 信息 及 注销 按钮 ,否则 显示 注册 及 登录 链接 。 
最 后 注意 "@RenderBody() "代码 , 它 的 作用 是 在 模板 中 创建 一 个 占 位 符 , 当 被 请 求 页 


面 引用 该 模板 时 ,页 面 的 内 容 将 被 插入 到 该 占 位 符 的 位 置 。 所 以 ,Layout 视图 定义 页 面前 
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整体 布局 ,而 所 有 action 相关 的 页 面 ,其 内 容 都 被 插入 到 布局 中 的 指定 位 置 。 
9.3.2 生成 视图 的 内 容 


视图 设计 中 的 一 个 难点 问题 是 如 何在 服务 器 端 动态 构造 HTML 标签 。 在 Web Form 











模型 下 使 








Web Form 


服务 器 端 控件 可 以 很 容易 地 解决 这 一 问题 ,但 Web Page 模型 的 处 理 过 程 与 


完全 不 同 ,无 法 使 用 服务 器 端 控 件 , 只 能 使 用 Razor 语法 的 C# 人 代码, 这样 手 工 


编码 的 效率 很 低 , 且 重用 性 不 高 。 为 了 解决 这 一 问题 ,ASP. NET 框架 提供 了 HtmlHelper 














辅助 类 ,帮助 用 户 在 服务 器 端 构 造 各 种 HTML 标签 。 
MVC 模式 下 的 视图 组 件 直接 或 间接 地 继承 自 ViewPage 类 ,而 通过 该 类 的 Html 属性 


可 以 获取 一 


示例 : 








个 HtmlHelper 对 象 , 依 靠 它 的 帮助 可 以 方便 地 生成 各 种 html 标签 ,请 看 以 下 


@Html. RctionLink(" 联 系 方 式 "，"Contact"，" Home") 


该 行 调用 HtmlHelper 对 象 的 扩展 方法 ActionLink ,在 服务 器 端 动态 构造 一 个 超 链接 
标签 ,相当 于 为 客户 端 生成 以 下 HTML 代码 : 


<a href = "/Home/Contact"> 联 系 方式 </a> 


ActionLink 扩展 方法 有 多 种 重 载 形式 ,例如 : 


ActionLink(string linkText, string actionName) 
ActionLink( string linkText, string actionName, string controllerName) 
ActionLink( string linkText, string actionName, object routeValues) 


打开 电影 视图 下 的 Index. cshtml 页 面 , 注 意 为 影片 生成 Edit 超 链接 的 代码 : 


@Htnl. 


ActionLink("Edit", "Edit", new { id= item. ID }) 


该 链接 不 仅 要 导航 到 Edit. cshtml 页 面 , 还 要 将 当前 影片 的 id 传递 过 去 ,所 以 采用 了 上 
面 列 出 的 第 3 种 重 载 形 式 。 第 3 个 参数 为 routeValues 集合 ,其 中 包含 了 一 个 i 字典 项 ,而 
省 略 了 controllerName, 上 默认 为 当前 controller。 最 终生 成 的 客户 端 标 签 如 下 : 


<a href = "/Movies/Edit/1"> Edit </a> 


请 大 家 对 照 Movies 视图 文件 夹 下 的 几 个 文件 分 析 各 导航 链接 的 构造 方法 。 关 于 
ActionLink 扩展 方法 的 详细 介绍 请 查阅 以 下 文档 : 


https://msdn. microsoft. com/en — us/library/system. web. mvc. html]. linkextensions.actionlink 














使 用 HtmlHelper 还 可 以 构造 其 他 常用 的 表单 元 素 标签 ,请 看 以 下 代码 : 











@Htm]. TextBox("tbxname", ViewData[ "Name"],new{ @class = "tbx"} ) 
@Htm]. CheckBox( "chk1", true) 
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@Htm1. RadioButton("Gender","1",true) 
@Html. DropDownList("ddl1", (SelectList)ViewData[ "Categories"], 
== Select 0ne==") 


前 3 行 代 码 都 将 生成 input 标签 ,类 型 分 别 为 text、checkbox 和 radio; 最 后 一 个 标签 将 
生成 select 及 option 标签 。 对 应 的 客户 端 代码 如 下 : 


<input id = "tbxname" type= "text" value="..." class= "tbx"/> 
< input id = "chk1" type = "checkbox" value = "true" checked = "checked" /> 
< input id = "Gender" type = "radio" value = "1" checked = "checked" /> 
<select id= "ddl1" name = "ddl1"> 

<option value = ""> -- Select One -- </option> 





</select> 


用 户 也 可 以 使 用 HtmlHelper 向 客户 端 直接 输出 HTML 内 容 的 字符 串 , 例 如: 


@Htnl.Encode("<p> 编 码 字符 串 </p>") 
@Htnml.Raw("<p> 未 编码 字符 串 </p>") 


其 生成 的 客户 端 内 容 如 下 : 


Samp; 1t;p&amp; 9t; 编码 字符 串 &amp;1t;/p&amp; gt; 
<p > 未 编码 字符 串 </p> 


可 以 看 出 ,调用 Encode 扩展 方法 会 对 一 个 字符 串 进 行 HTML 编码 ,确保 其 中 不 会 出 
现 “<”“>” 等 特殊 字符 ; 而 Raw 扩展 方法 会 将 字符 串 原 原本 本 地 输出 到 客户 端 。 

在 MVC 模式 下 通常 由 控制 器 生成 数据 内 容 , 并 传递 给 视图 组 件 显示 。 很 多 时 候 控 制 器 
将 数据 封装 在 模型 对 象 中 传递 给 视图 ,视图 要 根据 模型 对 象 中 的 数据 项 一 一 生成 HTML 标 
签 。 这 里 以 Details 视图 为 例 ,如 果 要 显示 Movie 实体 的 各 项 信息 ,可 以 使 用 DisplayNameFor 
和 DisplayFor 扩展 方法 ,请 看 以 下 代码 : 


<dl class = "dl - horizontal"> 
<dt>@Htm1.DisplayNameFor(model => model.Price)</dt > 
<dd>@Html. DisplayFor(model => model.Price)</dd> 
</dl> 

















这 里 使 用 了 dl-dt-dd 的 结构 来 显示 一 个 实体 的 内 容 , 第 2 行 显示 了 实体 的 Price 属性 的 
标题 ,第 3 行 显示 Price 属性 的 值 ,生成 的 客户 端 代码 如 下 : 
<dl class = "dl - horizontal"> 


<dt>Price</dt ><dd>90.00</dd> 
</dl> 


注意 DisplayFor 扩展 方法 的 使 用 ,在 调用 该 方法 时 系统 会 自动 将 该 页 面 的 模型 对 象 作 
为 实 参 传 给 形 参 model, 然 后 通过 Lambda 表达 式 访问 该 对 象 的 price 属性 。 
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在 Edit 和 Create 视图 中 要 录入 各 属性 的 数据 ,还 要 实现 客户 端 验证 ,并 在 验证 未 通过 
时 显示 错误 提示 ,请 看 以 下 代码 块 : 





<div class = "form— group"> 
@Html]. LabelFor(model => model.Title, htmlAttributes: new 
{ @class = "control— label col - md— 2" }) 
<div class= "col—- md- 9"> 
@Htm]l. EditorFor(model => model.Title, new { htmlAttributes = 
new { @class = "form— control" } }) 
@Html. ValidationMessageFor(model => model.Title, "", 
new { @class = "text— danger" }) 
</div> 
</div> 


很 显然 ,LabelFor 扩展 方法 为 显示 Title 属性 生成 label 标签 , EditFor 扩展 方法 为 
Title 属性 生成 input 标签 ,而 ValidationMessageFor 方法 为 Title 属性 生成 验证 信息 ,最 后 
发 送 给 客户 端的 代码 如 下 : 


<div class ="form 一 group"> 
<label class = "control - label col - md— 2" for= "Title">Title </label > 
<div class= "col-md 一 9"> 
< input class = "form - control text— box single- line" id= "Title" 
name = "Title" type= "text" value = "The Lion King" /> 
<span class= "field- validation — valid text — danger" 
data— valmsg — for = "Title" data— valmsg — replace= "true"></span> 
</div> 
</div> 


当 视 图 页 面 需要 表单 元 素 时 ,可 以 使 用 HtmlHelper 对 象 帮 助 构建 。 这 里 以 Edit 视图 
为 例 , 在 Edit. cshtml 中 有 以 下 代码 块 : 
@using (Html.BeginForm()){ 


构造 表单 控件 的 代码 
} 


这 里 使 用 HtmlHelper 对 象 的 BeginForm 扩展 方法 自动 构造 form 标签 ,而 @using 指 
令 构造 一 个 代码 块 , 以 保证 块 结束 时 自动 进行 对 象 的 清理 。 生 成 的 客户 端 代码 如 下 : 


<form action = "/Movies/Edit/1" method= "post"> 


表单 内 部 的 控件 定义 
</form> 


关于 HtmlHelper 对 象 及 其 扩展 方法 的 更 多 信息 请 参考 以 下 文档 : 


https://msdn.microsoft. com/zh - cn/library/system. web. mvc. htmlhelper.aspx 
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@.4 在 控制 器 和 视图 间 传 递 数据 


在 视图 和 控制 器 之 间 存 在 双向 的 数据 传递 ,一 是 当 用 户 提交 表单 或 发 送 GET 请 求 时 ， 
MVC 框架 要 从 请 求 中 获取 参数 传人 控制 器 ; 二 是 当 控制 器 处 理 完 请 求 并 导航 到 输出 视图 
时 ,要 将 输出 数据 传递 给 视图 。 


9.4.1 从 视图 向 控制 器 传递 数据 


对 于 GET 请 求 , 使 用 路 由 参数 或 查询 字符 串 都 可 以 向 控制 器 传递 数据 。 例如 ,在 
Index 视图 中 单 击 某 影片 的 详情 链接 时 将 请 求 以 下 URL: 








http://localhost: 端 口号 /Movies/Details/1 


该 URL 满足 “/controller/action/id” 的 模式 ,所 以 主键 1 作为 id 传人 ,控制 器 中 相应 的 
action 方法 原型 如 下 : 


public ActionResult Details( int? id) 


很 显然 , 键 值 1 被 传递 给 了 Details 方法 中 的 id 参数 。 
如 果 在 浏览 器 的 地 址 栏 中 发 出 以 下 请 求 : 


http://localhost: 端 口号 /Movies/Details?id=1 


同样 可 以 导航 到 该 影片 的 详情 页 面 ,这 就 说 明 使 用 查询 字符 串 也 能 完成 与 路 由 参数 同 
样 的 功能 。 当 在 查询 字符 串 中 指定 多 个 参数 时 ,还 可 以 一 次 传递 多 个 数据 给 控制 器 。 

对 于 POST 请 求 ,在 控制 器 中 通常 使 用 一 个 模型 对 象 来 接收 表单 数据 。 例 如 , 当 新 建 
或 编辑 一 部 影片 的 信息 后 单 击 Save 按钮 提交 表单 ,这 时 需要 将 表单 内 容 传递 给 控制 器 中 的 
模型 对 象 。 

这 里 以 编辑 操作 为 例 , 假 如 编辑 了 id 为 1 的 影片 , 单 击 Save 按钮 时 ,提交 的 URL 为 
“/Movies/Edit/1”, 请 求 方法 为 Post, 控 制 器 中 相应 的 action 方法 如 下 : 


[HttpPost] 
public ActionResult Edit( 
[Bind( Include = "ID,Title, ReleaseDate, Genre, Price")] Movie movie){ 
if (ModelState. IsValid) { 
db. Entry(movie). State = EntityState. Modified; 
db. SaveChanges{( ); 
return RedirectToAction("Index" ); 
|! 
return View(movie); 


} 














很 显然 ,该 方法 需要 传人 一 个 模型 对 象 movie, 其 数据 项 来 自 于 表单 参数 ,使 用 [Bind] 
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注解 指明 要 绑 定 的 表单 参数 有 ID、Title、ReleaseDate、Genre、Price 等 ; MVC 框架 会 自动 进 
行 数据 验证 ,以 保证 表单 中 含有 以 上 列 出 的 几 个 参数 项 ; 验证 的 结果 会 保存 在 ModelState 
属性 中 ,车 验证 通过 , 见 将 当前 实体 的 信息 保存 到 数据 库 , 并 重 定向 到 列表 页 面 ,否则 回 到 
Edit 视图 重新 编辑 数据 。 


9.4.2 从 控制 器 向 视图 传递 数据 
通常 有 两 种 方式 从 控制 器 向 视图 传递 数据 。 
































1. 使 用 ViewData 或 ViewBag 传递 数据 


在 视图 和 控制 器 中 都 可 以 通过 ViewData 属性 访问 一 个 数据 集合 ,其 中 的 数据 以 字典 
的 形式 组 织 , 通 过 键 名 访问 键 值 ; 键 值 为 object 类 型 ,需要 强制 转换 为 原来 的 类 型 才能 访问 
(string 类 型 的 数据 不 需要 强制 转换 )。ViewBag 和 ViewData 本 质 上 是 同一 个 数据 集 , 只 是 
前 者 对 ViewData 又 做 了 一 层 包装 ,提供 了 动态 类 型 访问 ,这 样 使 用 起 来 更 加 方便 ,不 需要 
强制 类 型 转换 。 请 看 以 下 示例 : 


public IActionResult SomeAction() { 
ViewData["Greeting"] = "Hello"; 
ViewData["Address"] = new Address(){ 
Name = "Steve", 
Street = "123 Main St", 
City = "Hudson", 
}; 
return View( ); 


} 


在 视图 中 可 以 通过 以 下 代码 访问 ViewData 数据 : 


@ViewData[ "Greeting"] World! 
@{ var address = ViewData["Address"] as Address; } 
@address. Name < br /> @address. Street < br /> @address.City 


注意 第 2 行 代码 对 address 做 了 强制 类 型 转换 ,这 样 在 后 面 的 程序 中 才能 够 访问 该 对 
象 的 各 个 属性 ,而 使 用 ViewBag 更 加 方便 ,使 用 以 下 代码 可 以 达到 同样 的 功能 : 


@ViewBag. Greet ing World! 
@ViewBag. Address. Name < br /> @ViewBag. Address. Street < br /> 
@ViewBag. Mdress.City 


2. 使 用 模型 对 象 传递 数据 


ViewData 是 一 种 " 松 耦 合 ” 的 数据 传递 方式 ,还 有 一 种 * 紧 耦合 ”的 方式 是 为 视图 定义 一 
个 模型 ,然后 从 控制 器 向 视图 传递 该 模型 的 对 象 实例 。 这 里 以 Details 请 求 为 例 ,控制 器 端 
的 核心 代码 如 下 : 
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Movie movie = db.movies.Find(id); 
return View(movie); 


在 生成 输出 视图 时 将 模型 对 象 movie 传递 了 进去 ,这 样 在 视图 中 就 可 以 访问 该 对 象 。 
注意 Details. cshtml 中 的 代码 ,第 1 行 如 下 : 


@model exam9. Models. Movie 


这 里 明确 指定 了 该 页 面 要 接收 的 模型 对 象 类 型 为 Movie, 在 后 续 代 码 中 访问 模型 对 象 
时 ,因为 已 经 明确 数据 类 型 ,所 以 能 够 出 现 智能 提示 ,在 编译 时 也 能 进行 类 型 检查 。 
以 Details 视图 为 例 ,其 中 显示 影片 标题 信息 的 代码 如 下 : 


<dl class = "dl - horizontal"> 
<dt>@Html. DisplayNameFor(model => model.Title)</dt > 
<dd>@Html. DisplayFor(model => model. Title)</dd> 
</dl> 





这 里 使 用 了 Lambda 表达 式 ,将 模型 对 象 作 为 实 参 传递 给 形 参 model, 于 是 可 以 使 
model. Title 的 形式 访问 该 对 象 的 Title 属性 。 

如 果 在 视图 文件 的 项 部 没有 使 用 @model 指令 指定 模型 的 类 型 ,在 视图 中 也 可 以 使 
模型 对 象 ,但 该 对 象 只 能 以 动态 类 型 的 形式 访问 ,无 法 实现 编译 时 的 类 型 检测 ,也 无 法 使 
智能 提示 。 例 如 ,为 了 显示 影片 的 标题 和 价格 ,可 以 使 用 以 下 代码 : 




















<dl class = "dl - horizontal"> 
<dt>Title:</dt > <dd>@Model. Title </dd> 
<dt>Price:</dt > <dd>@Model. Price </dd> 
</dl> 


这 里 使 用 Model 属性 访问 视图 中 的 模型 对 象 ,其 类 型 为 Dynamic; 使 用 @Model. Title 
和 @Model. Price 分 别 访问 模型 对 象 的 Title 和 Price 属性 。 


8.5 习题 和 上 机 练习 
So 


简 答 题 


(1) 简要 描述 Web 开发 中 常用 的 三 层 体系 结构 。 

(2) 什么 是 MVC 设计 模式 ,引入 MVC 模式 有 什么 好 处 ? 

(3) 总 结 说 明 MVC 框架 如 何 实 现 请 求 的 委派 处 理 。 

(4) 对 于 MVC 框架 中 的 视图 组 件 ,通常 用 到 哪 几 类 视图 文件 ? 
(5) 试 总 结 MVC 框架 如 何 从 视图 向 控制 器 传递 数据 。 

(6) 试 总 结 MVC 框架 如 何 从 控制 器 向 视图 传递 数据 。 

(7) 比较 Web Form 模型 与 Web Page 模型 的 异同 。 





AJAX 与 Web API 


AJAX 是 Asynchronous JavaScript and XML 的 缩写 , 即 “ 异 步 JavaScript 与 XML 技 
术 ”, 这 一 技术 改变 了 以 往 Web 界面 的 交互 方式 , 带 来 了 更 加 良好 的 用 户 体 验 ,成 为 Web 2.0 
时 代 的 标志 性 技术 。 

ASP. NET Web API 是 一 个 在 . NET 平台 上 建立 HTTP 服务 的 编程 框架 。HTTP 简 
单 . 灵 活 \ 无 处 不 在 ,使 用 HTTP 服务 ,不 仅 有 助 于 开发 松 耦合 的 Web 应 用 ,还 适用 于 开发 
传统 的 桌面 应 用 以 及 跨 平台 的 移动 应 用 。 

ASP. NET 提供 了 一 系列 方案 和 工具 来 支持 AJAX 开发 ,如 果 将 AJAX 与 Web API 结 
合 ,就 能 产生 不 可 思议 的 开发 效果 。 一 种 全 新 的 开发 模式 是 由 Web API 在 服务 器 端 提供 服 
务 , 由 AJAX 在 客户 端 请 求 服务 ,以 此 架构 快速 搭建 松 耦合 、 跨 平台 的 Web 应 用 。 本 章 先 分 
别 讲解 AJAX 与 Web API 技术, 然后 将 两 者 结合 开发 一 个 典型 的 单 页 应 用 程序 。 


(10.1 AJAX 技术 
SA 


AJAX 是 HTML .JavaScript.DHTML DOM、XML 等 技术 的 组 合体 ,这 一 组 合 改变 了 
以 往 Web 应 用 的 交互 方式 , 带 来 了 更 加 良好 的 用 户 体验 。 


10.1.1 AJAX 技术 基础 


目前 的 应 用 程序 主要 有 两 种 工作 模式 , 即 桌 面 应 用 和 Web 应 用 。 前 者 被 安装 在 本 地 计 
算 机 上 运行 ; 后 者 被 安装 在 Web 服务 器 上 ,通过 Web Wai 桌面 应 股 具 有 
极 快 的 运行 速度 和 和 良好 的 交互 能 力 ,而 Web 应 用 往往 达 不 到 同样 的 性 能 ,这 主要 是 由 于 传 
统 Web 技术 中 基于 “请 求 -刷新 ”的 工作 机 制 存 在 以 下 固有 的 缺陷 。 

(1) 页 面 需要 反复 刷新 : 每 当 用 户 向 Web 服务 器 端 请 求 一 次 数据 时 都 会 导致 页 面 整体 
刷新 ,哪怕 只 是 更 新 一 个 数据 ,服务 器 端 也 会 重新 生成 整个 Web 页 面 , 造 成 很 大 的 服务 器 负 
荷 及 传输 数据 量 。 在 很 多 时 候 这 种 消耗 是 没有 意义 的 。 

(2) 在 页 面 刷新 期 间 ,用 户 只 能 等 待 : 浏览 器 和 服务 器 采用 同步 的 通信 机 人 制 , 当 用 户 提 
交 请 求 后 页 面 将 处 于 冻结 状态 ,等 待 服务 器 端 反馈 数据 。 在 新 页 面 加 载 之 前 ,用 户 只 能 等 
待 ,不 能 做 任何 事情 ,尤其 是 当 网 速 较 慢 时 会 消耗 很 长 时 间 。 

(3) 绝 大 多 数 工作 都 在 服务 器 端 完 成 ,服务 器 的 负荷 很 重 , 往 往 成 为 系统 性 能 的 瓶颈 。 

AJAX 技术 的 出 现 改 变 了 这 种 状况 , 它 具 有 以 下 特点 。 
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(1) 可 实现 页 面 的 局 部 刷新 : 可 以 借助 客户 端 技术 找到 页 面 中 需要 更 新 的 局 部 区 域 ， 
只 更 新 该 区 域 中 的 数据 ,而 不 需要 刷新 整个 页 面 , 大 大 减轻 了 服务 器 的 负荷 。 

(2) 只 做 必要 的 数据 交换 : 由 于 只 刷新 页 面 的 部 分 区 域 ,不 需要 服务 器 端 生 成 整个 
HTML 页 面 ,而 是 只 生成 客户 端 需要 的 部 分 数据 ,大 大 降低 了 网 络 传输 的 数据 量 。 

(3) 异步 访问 服务 器 端 : ein 浏览 器 和 服务 器 采用 异步 通信 的 方式 在 
后 台 处 理 请 求 ,页面 不 会 冻结 ; 在 请 求 结果 返回 前 ,用 户 可 以 继续 浏览 网 页 而 不 用 傻 等 ; 当 
服务 器 端 返回 结果 后 ， wa 面 

AJAX 编程 分 为 服务 器 端 与 客户 端 丙 部 分 ， 如 图 10-1 所 示 。 
















































































图 10-1 AJAX 技术 框架 


服务 器 端 编程 可 以 使 用 现 有 的 技术 (如 ASP. NET) ,由 于 不 需要 返回 整个 页 面 ,只 返回 
需要 的 数据 ,所 以 在 很 多 时 候 使 用 Web Service 或 HTTP Handler 处 理 AJAX 请 求 , 按 指定 
的 格式 将 数据 打包 发 回 客户 端 即 可 。 

客户 端 编程 的 核心 是 XMLHttpRequest 对 象 ,利用 它 向 服务 器 端 发 送 异 步 请 求 ,并 接 
收 返回 的 数据 ; 然后 使 用 文档 对 象 模型 在 文档 中 检索 局 部 更 新 的 区 域 ,并 用 服务 器 端 返回 
的 数据 更 新 页 面 。 

在 ASP. NET 下 开发 AJAX 风格 的 应 用 程序 可 以 采用 两 种 方法 ,一 是 手工 编码 方式 ， 
即 手工 完成 异步 通信 及 局 部 刷新 的 处 理 过 程 ; 二 是 使 用 AJAX 控件 的 方式 。 


10.1.2 传统 的 AJAX 编程 方式 


传统 的 AJAX 应 用 需要 在 客户 端 手工 编码 ,实现 异步 通信 及 局 部 刷新 的 处 理 过 程 。 
例 10-1 使 用 AJAX 技术 从 服务 器 端 获取 XML 内 容 并 显示 在 页 面 上 。 
(1) 创建 网 站 项 目 , 建 立 以 下 的 Employees. XML 文件 : 





<table border = "1"> 
<tr><th> EmpID</th> <th>FirstName </th> <th> LastName </th></tr > 
<tr><td>1</td><td>Tom</td><td>Cat </td></tr> 
<tr><td>2</td><td>Jerry</td><td> Mouse </td></tr> 

</table> 


(2) 建立 测试 页 面 ShowEmployees. aspx, 代 码 如 下 : 


<html xmlns = "http://www. w3. org/1999/xhtml"> 
<head ><title > 使 用 AJAX 显示 XML 数据 </title></head> 
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<body > 
<form action="#"> 
< input type = "button" value = "获取 员工 信息 并 显示 ”onclick = "startRequest();" /> 
<div id= "results" ></div> 
</form> 
</body > 
</html > 


该 页 面 非常 简单 ,只 有 一 个 按钮 和 一 个 div 元 素 。 当 单 击 按钮 时 ,向 服务 器 发 送 异 步 请 
求 ,获取 Employees. XML 文件 中 的 内 容 , 并 将 其 显示 在 div 元 素 中 。 
(3) 定义 函数 以 创建 XMLHttpRequest 对 象 。 在 页 面 的 head 标记 中 加 入 以 下 代码 : 





<script> 
var xhr; 
function CreateXMLHttpRequest() { 
try { 
xhr = new XMLHttpRequest(); 
} catch(err) { 
xhr = new RctiveXObject("Microsoft. XMLHTTP"); 
由 
</script "> 


XMLHttpRequest 对 象 是 AJAX 技术 的 基石 ,在 如 何 创建 和 访问 XMLHttpRequest 对 
象 上 ,不 同 的 浏览 器 有 着 细微 的 差别 。 对 于 Firefox 及 IE7 以 上 的 浏览 器 ,该 对 象 是 作为 本 
地 JavaScript 对 象 实现 的 ; 但 在 IE7 以 前 的 版 本 中 , 它 却 是 作为 ActiveX 对 象 实现 的 。 因 为 
这 些 差别 ,使 用 JavaScript 创建 XMLHttpRequest 对 象 实例 时 必须 要 足够 的 智能 ,采用 正 
确 的 方法 。 本 例 中 先 尝试 按照 本 地 对 象 来 创建 , 若 抛 出 异常 , 则 说 明 浏 览 器 版 本 较 老 ,所 以 
再 按照 ActiveX 方式 创建 ,这 样 无 论 如 何 都 能 保证 正确 地 创建 了 一 个 XMLHttpRequest 对 
象 实例 。 

(4) 在 按钮 单 击 事件 中 触发 异步 请 求 。 在 script 标记 中 加 入 以 下 脚本 : 


function startRequest() { 
CreateXMLHttpRequest() 
xhr. open( "GET", "Employees. xml") 
xhr. onreadystatechange = showdata; 
xhr. send( null1); 

} 





在 函数 体 中 ,第 1 行 创建 了 XMLHttpRequest 对 象 实例 。 

第 2 行 调用 XMLHttpRequest 对 象 的 open 方法 建立 异步 调用 , 即 定 义 要 发 送 到 服务 
器 的 请 求 。 这 里 需要 两 个 参数 , 即 请 求 方 式 (GET、POST 或 PUT) 及 请 求 的 URL。 户 还 
可 以 使 用 第 3 个 参数 指明 请 求 是 否 异 步 执 行 ,默认 为 true, 所 以 省 略 。 

第 3 行 指明 如 何 处 理 响应 , 即 当 异 步 请 求 执行 完成 返回 请 求 数据 后 ,由 showdata 函数 
负责 刷新 页 面 。 
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第 4 行 真 正 地 发 送 了 异步 请 求 。send 方法 可 以 接收 一 个 字符 型 参数 ,代表 随 请 求 发 送 
的 额外 数据 。 对 于 I 可 以 忽略 该 参数 ,但 对 于 Firefox 必须 提供 一 个 null 引用 ,和 否则 回调 
处 理 可 能 会 不 正确 。 

(5) 处 理 响应 。 

在 script 标记 中 加 入 以 下 脚本 : 





























function showdata() { 
if (xhr. readyState == 4) { 
if (xhr. status == 200) { 
document. getElementById("results"). innerHTML = xhr.responseText; 
1 


} 


当 服 务 器 端 返回 响应 时 ,可 以 使 用 responseText 和 responseXML 属性 从 XMLHttpRequest 
对 象 中 析 取 需要 的 数据 。 从 字面 意思 理解 ,responseText 将 数据 内 容 当 成 一 个 字符 串 返 
回 , 而 responseXML 将 其 作为 树 的 结 点 对 象 返回 ,在 具体 应 用 中 要 根据 实际 情况 进行 选择 。 

特别 需要 说 明 的 是 ,在 获取 响应 数据 之 前 必须 先 判断 XMLHttpRequest 对 象 的 状态 ， 
确认 请 求 已 处 理 完毕 并 且 正 确 地 返回 了 响应 数据 。 当 XMLHttpRequest 对 象 的 readyState 
状态 改变 时 (xhr. onreadystatechange) ,将 触发 showdata 函数 调用 ,但 readState 共有 5 种 
状态 ,任何 一 次 状态 变化 都 会 触发 showdata ,而 只 有 状态 值 为 4 时 才 表 示 响 应 完全 加 载 。 
当 响 应 完全 加 载 时 ,还 要 判断 本 次 请 求 处 理 是 否 成 功 ,这 通过 status 属性 判断 , 值 为 200 表 
示 处 理 成 功 ,其 他 代码 都 表示 出 现 了 某 种 类 型 的 错误 。 

通过 本 例 可 以 看 出 ,AJAX 是 一 项 比较 中 立 的 技术 ,不 在 乎 服务 器 端 采用 什么 技术 ,只 
要 能 够 返回 XML 格式 的 数据 即 可 ,本 例 没有 使 用 任何 服务 器 端 编程 技术 ,直接 从 一 个 文件 
中 获取 XML。 事实 上 ,早期 的 AJAX 要 求 服务 器 端 返回 XML 格式 的 数据 ,由 于 XML 数据 
往往 格式 元 长 ,在 现在 的 应 用 中 往往 不 使 用 XML 返回 结果 。 

例 10-2 使 用 AJAX 技术 实现 列表 框 的 联动 。 

在 第 1 个 列表 框 中 显示 大 区 (Region) 列 表 , 在 第 2 个 列表 框 中 显示 地 区 (Territory) 列 
表 , 当 在 第 1 个 列表 框 中 选择 某 个 大 区 时 ,第 2 个 列表 框 中 自动 填充 该 大 区 下 的 所 有 地 区 。 
页 面 的 运行 效果 如 图 10-2 所 示 。 
常规 方式 实现 列表 框 的 联动 也 比较 简单 ,只 要 设置 大 区 列表 框 的 AutoPostBack 属 
性 为 真 ,然后 在 服务 器 端 捕获 其 SelectedIndexChanged 事件 ,在 其 中 编码 ,访问 数据 库 并 填 
充 地 区 列表 框 即 可 。 但 这 种 方式 会 导致 页 面 整体 刷新 ,产生 不 必要 的 延迟 和 闪烁 ,使 
AJAX 技术 实现 效果 更 佳 。 

(1) 建立 页 面 ,代码 如 下 : 



































TF 





























<html xmlns = "http://www. w3. org/1999/xhtml"> 
<head runat = "server"> 
<title> 使 用 AJAX 技术 实现 列表 框 的 联动 </title> 
< script type = "text/javascript"> 
Var xmlRequest; 
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Choose a Region, and then a Territory: 


Northem 司 





图 10-2 使 用 AJAX 技术 实现 列表 框 的 联动 


function CreateXMLHttpRequest() { 
try { 
xmlRequest = new XMLHttpRequest(); 
bs 
catch(err) { 
xmlRequest = new ActiveXObject("Microsoft.XMLHTTP"); 
} 


! 
</script > 
</head > 
<body onload = "CreateXMLHttpRequest( ) ; "> 
<form id = "forml" runat = "server"> 
Choose a Region, and then a Territory:<br /><br /> 
<asp:DropDownList ID= "lstRegions" runat = "server" 
DataSourceID = "sourceRegions" 
DataTextField = "RegionDescription" DataValueField = "RegionID" 
onchange = "getTerritories();"> </asp:DropDownList > 
<asp:DropDownList ID = "lstTerritories" runat = "server" /> 
<asp:SqlDataSource ID= "sourceRegions" runat = "server" 
ConnectionString = "<% $ ConnectionStrings:Northwind %>" 
SelectCommand = "select RegionID, RegionDescription from Region"> 
</asp:SqlDataSource > 
</form> 
</body > 
</html > 


本 例 在 服务 器 端 使 用 SqlDataSource 自动 填充 大 区 的 下 拉 列 表 框 。 客 户 端 在 页 面 加 载 
完成 后 自动 创建 XMLHttpRequest 对 象 ,并 捕获 下 拉 列 表 框 的 change 事件 以 触发 AJAX 
调用 。 


























(2) 触发 AJAX 通信 ,本数 代码 如 下 : 


function getTerritories () { 
var val = document. getElementById('lstRegions'). value; 
var url = "ajaxddlhandler.ashx?regid=" + val; 
xmlRequest. open( "GET", url); 
xmlRequest. onreadystatechange = RefreshDDL2; 
xmlRequest. send( nul1); 
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函数 第 1 行 在 DOM 中 查找 大 区 的 下 拉 列 表 框 ,并 获取 其 当前 选项 值 。 下 一 步 是 向 服 
务 器 发 送 异 步 请 求 , 获 取 该 大 区 下 的 所 有 地 区 列表 。 巾 于 服务 器 端 不 需要 生成 整个 页 面 , 没 
有 必要 采用 复杂 的 Web Form 模型 ,这 里 使 用 了 一 般 HTTP 处 理 程序 来 处 理 异 步 请 求 , 所 
以 请 求 的 URL 为 ajaxddlhandler. ashx, 同 时 将 大 区 代码 作为 参数 传递 过 去 。 




















(3) 创建 一 般 HTTP 处 理 程 序 以 处 理 异 步 请 求 。 


在 ASP.NET 中 所 有 的 请 求 最 终 都 是 由 一 个 实现 了 IHttpHandler 接口 的 类 来 处 理 的 ， 





一 般 情况 下 这 个 类 就 是 一 个 Web Form 页 面 。 


在 很 多 情况 下 只 需要 接收 和 处 理 请 求 ,然后 返回 数据 ,不 必 使 用 基于 控件 的 Web Form 
模型 ,不 需要 经 过 完整 的 页 面 事件 过 程 来 创建 页 面 (包括 创建 网 页 对 象 . 持 久 化 视图 状态 
等 ) ,这样 可 以 节约 大 量 的 服务 器 资源 。 这 时 候 使 用 低层 接口 会 非常 方便 ,用 户 可 以 自 定 义 
一 个 HTTP 处 理 程序 ,实现 IHttpHandler 接口 ,这样 就 可 以 实现 简单 的 请 求 处 理 。 








在 IHttpHandler 接口 中 定义 了 两 个 成 员 ,如 表 10-1 所 示 。 
表 10-1 IHttpHandler 接口 的 成 员 
成 ” 员 描 述 





ProcessRequest 


请 求 处 理 方法 , 当 请 求 该 处 理 程序 时 会 自动 调用 该 方法 。 在 该 方法 中 可 以 通过 传人 
的 HttpContext 对 象 访问 Request、Response 等 内 部 对 象 





该 属性 指明 本 处 理 程序 是 否 可 以 重用 。ProcessRequest 方法 执行 完成 后 会 自动 检查 


IsReusable 该 属性 , 若 为 假 , 则 立刻 释放 该 对 象 , 若 为 真 则 不 释放 ,还 可 以 被 另 一 个 和 当前 请 求 类 





型 相同 的 请 求 所 重用 
自 定义 的 请 求 处 理 程序 代码 如 下 : 


<% @ WebHandler Language = "C#" Class = "AjaxDDLHandler" %> 

using System; 

using System. Web; 

using System. Text; 

using System. Data. SqlClient; 

using System. Web. Conf iguration; 

public class AjaxDDLHandler : IHttpHandler { 

public void ProcessRequest(HttpContext context) { 

HttpResponse response = context.Response; 
context. Response. ContentType = "text/plain"; 
string regid = context.Request. QueryString[ "regid"]; 
string territories = GetTerritories (regid); 
context. Response. Write( territories); 


// 获取 大 区 瑟 
// 检索 该 大 区 下 的 地 区 列表 
// 输出 检索 到 的 地 区 列表 











321 


322 


回 数 
有 地 


统 的 
加 传 
Terr 


ASP .NET Web 应 用 开发 技术 (第 2 版 ) 


1 
public bool IsReusable { 
get { return true; } 
public string GetTerritories(string regid) { 
SqlConnection con = New SqlConnection( 
WebConfigurat ionManager. ConnectionStrings["Northwind" ]. Connect ionString); 
SqlCommand cmd = new SqlCommand( 
"select * from Territories where RegionID= (@RegionID", con); 
cmd. Parameters. AddWithValue("(@RegionID", regid); 


StringBuilder results = new StringBuilder(); // 利用 该 对 象 构造 输出 字符 串 


try { 
con. Open( ); 
SqlDataReader reader = cmd.ExecuteReader(); 
while (reader. Read()) { 





results. Append( reader[ "TerritoryDescription"]); // 地 区 名 称 

results, Append("|"); // 地 区 名 称 和 功 间 用 | 分 隔 
results. Append( reader[ "TerritoryID" ]); // 地 区 ID 

results. Append("| |"); // 两 地 区 间 用 | | 分 隔 


} 
reader. Close( ); 
catch (SqlException err) { … } // 异常 处 理 代码 略 
finally{ con.Close(); } 
return results. ToString(); 


又 的 信息 ,最 后 将 查询 结果 写 到 响应 中 ,返回 给 客户 端 。 











itoryID 两 个 数据 项 ,之 间 用 “1” 符号 分 隔 。 
(4) 人 处理 返 回 结 果 , 刷 新 页 面 ,代码 如 下 : 
function RefreshDDL2() { 


if (xmlRequest. readyState == 4) { 
if (xmlRequest. status == 200) { 





var result = xmlRequest.responseText; // 获取 返回 的 地 区 数据 
Var lstTerritories = document.getElementById("lstTerritories"); 

lstTerritories. innerHTML = ""; // 清空 原 有 的 地 区 列表 
var rows = result.split("||"); // 用 || 切 分 出 多 个 地 区 





for (var i = 0; i<rows.length - 1; ++i) { // 遍历 所 有 地 区 
var fields = rows[i].split("|"); // 用 | 切 分 出 地 区 名 称 和 ID 





在 ProcessRequest 方法 中 设置 相应 的 内 容 类 型 为 text/plain, 表 示 以 纯 文 本 的 形式 返 
据 ; 然后 从 请 求 参数 中 获取 RegionID ,并 调用 GetTerritories 方法 以 检索 该 大 区 下 所 


在 GetTerritories 方法 中 根据 一 个 RegionID 可 以 检索 到 一 系列 Territory 信息 , 按 传 
做 法 可 以 将 这 些 信息 包装 在 一 段 XML 中 返回 ,但 考虑 到 XML 需要 复杂 的 标记 ,会 增 
答 的 数据 量 , 所 以 这 里 使 用 了 更 简单 的 数据 组 织 方式 。 使 用 StringBuilder 构造 返回 字 
,各 条 Territory 之 间 用 “|1” 符 号 分 隔 , 每 条 Territory 中 含有 TerritoryDescription 和 
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var territoryDesc = fields[0]; 
Var territoryID = fields[1]; 
// 针对 一 个 地 区 动态 创建 一 个 列表 项 


var option = document. createElement("option"); 





option.value = territoryID; 
option. innerHTML = territoryDesc; 


lstTerritories. appendChild(option); // 将 列表 项 加 入 下 拉 列 表 框 
} 
} 
} 
} 
这 里 首先 从 XMLHttpRequest 对 象 中 获取 返回 的 数据 ( 纯 文 本 字符 串 ), 然 后 对 该 字符 


串 进行 解析 。 在 JavaScript 中 调用 string 对 象 的 split 方法 可 以 实现 字符 串 的 切 分 ,传人 的 
参数 为 字符 串 分 隔 符 。 首 先 按 "| 1? 分隔 ,可 以 将 结果 拆 分 成 一 系列 Territories; 每 个 
Territory 又 包含 两 个 数据 项 ,所 以 再 使 用 “|” 切 分 ,得 到 TerritoryDescription 和 
TerritoryID ,在 循环 体 中 以 这 些 数据 为 基础 生成 列表 项 option ,添加 到 第 2 个 下 拉 列 表 框 
中 ,至 此 AJAX 请 求 处 理 完成 。 

运行 程序 ,在 第 1 个 列表 框 中 选择 一 个 大 区 ,可 以 看 到 页 面 并 没有 闪 动 ,但 第 2 个 列表 
框 中 已 经 填 人 了 适当 的 地 区 列表 ,这 就 是 异步 通信 带 来 的 用 户 体验 。 


10.1.3 使 用 jQuery 简化 AJAX 编程 


从 前 面 的 例子 可 以 看 出 ,使 用 传统 方式 进行 AJAX 编程 存在 很 多 困难 ,一 是 程序 复杂 ， 
代码 量 比较 大 ,二 是 不 同 浏览 器 的 API 有 所 差异 ,程序 的 兼容 性 也 存在 问题 。 幸 运 的 是 
jQuery 将 开发 人 员 解 放 了 出 来 ,使 用 jQuery 可 以 大 幅度 简化 AJAX 编程 ,同时 解决 了 跨 浏 
览 器 的 支持 问题 。 

针对 AJAX 编程 jQuery 提供 了 两 种 方案 ,一 是 使 用 全 功能 的 $. ajax() 方 法 (或 称 底层 
APD) ; 二 是 使 用 功能 单一 的 一 系列 方法 (或 称 高 层 API) ,包括 $. get()、$ . getScript()、 
$. getJSON()、$ .post() 和 $0O 〇 .1oad() 等 。 








1. 使 用 AJAX 底层 API 


首选 的 AJAX 编程 方案 是 使 用 $. ajax() 方 法 , 它 不 仅 功能 齐全 ,而 且 语法 简单 .易于 理 
解 。 请 看 以 下 代码 : 


// 使 用 全 功能 的 $ .ajax() 方 法 
$ .ajax({ 

url: "post.php"， 

data: { id: 123 }, 

type: "GET", 

dataType : "json" 
]) 
// 请 求 处 理 成 功 时 的 回调 函数 
// 响应 数据 被 传递 到 函数 中 
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.done(function( json ) { 
$ ("<hl>" ).text( json. title ).appendTo( "body" ); 
$( "<div class = \"content\">").html( json. htm] ).appendTo( "body" ); 
[a] 
// 请 求 处 理 失 败 时 的 回调 函数 
// 原始 请 求 及 状态 码 被 传递 到 函数 中 
.fail(function( xhr, status, errorThrown ) { 
alert( "Sorry, there was a problem!" ); 
console. log( "Error: " + errorThrown ); 
console. log( "Status: " + status ); 
console. dir( xhr ); 
}) 
// 不 论 请 求 成 功 还 是 失败 都 要 执行 的 回调 函数 
.always(function( xhr, status ) { 
alert( "The request is complete!" ); 
]) 7 


可 以 看 出 AJAX 应 用 的 代码 被 清晰 地 分 为 两 个 部 分 ,一 是 AJAX 请 求 , 二 是 回调 处 理 。 

在 AJAX 请 求 部 分 使 用 了 一 个 配置 对 象 ( 大 括号 中 加 粗 显示 的 部 分 ,PlainObject 类 型 ) 
来 包装 本 次 请 求 所 需要 的 一 切 信息 , 易 读 、 易 懂 ; 而 在 回调 处 理 中 不 仅 考 虑 了 成 功 的 请 求 ， 
也 做 了 失败 处 理 ,非常 完善 。 

AJAX 请 求 中 的 配置 对 象 由 一 组 “名 - 值 ? 对 构成 ,主要 配置 项 如 下 。 

(1) url: 本 次 请 求 的 url, 默 认为 请 求 当 前 页 面 的 url。 

(2) type: 请 求 方法 ,包括 GET POST 方法 ,默认 为 GET ,也 可 以 使 用 method 参数 指 
定 请 求 方法 。 

(3) data: 本 次 请 求 要 发 给 服务 器 端的 数据 ,将 作为 请 求 字符 串 传 递 给 服务 器 端 ; 本 例 
列 出 的 数据 为 “名 - 值 ? 对 形式 ,系统 自动 将 其 转化 为 请 求 字 符 串 形式 。 

(4) dataType: 期 望 从 服务 器 端 获得 的 响应 数据 的 类 型 ,如 果 没 有 指定 ,系统 会 自动 根 
据 响 应 头 中 的 MIME 类 型 进行 推断 ,通常 使 用 XML、HTML、 Script、JSON、JSONP 和 
Text 几 种 类 型 。 虽 然 AJAX 名 称 中 的 X 代表 XML, 但 事实 上 AJAX 应 用 并 不 必须 依赖 
XML ,目前 更 多 的 是 使 用 纯 HTML 或 JSON(JavaScript Object Notation) 来 传递 数据 。 

(5) Timeout: 请 求 超时 时 间 , 以 毫秒 为 单位 , 若 超过 该 时 长 还 没有 收 到 响应 数据 , 则 认 
为 本 次 AJAX 请 求 失败 。 

除 配置 参数 外 ,用 户 还 可 以 为 AJAX 请 求 配置 一 些 事件 处 理 方法 ,也 就 是 回调 函数 , 主 
要 如 下 。 

(1) success: 请 求 处 理 成 功 时 的 回调 函数 。 函 数 原 型 为 : 

















Function( Anything data, String textStatus, jqXHR jqXHR ) 











第 1 个 参数 为 返回 的 数据 ,第 2 个 参数 代表 响应 状态 ,第 3 个 参数 代表 本 次 请 求 使 用 的 
XMLHttpRequest 对 象 。 
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(2) error: 请 求 处 理 失 败 时 的 回调 卫 数 。 函 数 原 型 为 ; 





Function( jqXHR jqXHR, String textStatus, String errorThrown ) 














(3) Complete: 请 求 处 理 完成 ( 即 success 或 error 回调 后 ) 时 的 回调 函数 。 函 数 原 
型 为 : 














Function( jqXHR jqXHR，String textStatus ) 


有 了 这 些 配置 方法 也 可 以 直接 在 AJAX 请 求 中 编写 回调 代码 ,例如 : 


$ .ajax({ 
url: "test.php"， 
type: get, 
success: function(){ $ (this).addClass("done"); }, 
error: function() { $ (this).addClass("error"); } 


1); 


这 里 使 用 get 方法 请 求 了 test. html 页 面 ,车 请 求 成 功 , 则 回调 第 1 个 匿名 函数 ; 若 请 
求 失败 , 则 回调 第 2 个 匿名 函数 。 

关于 更 多 配置 项 的 信息 ,请 读者 参阅 “http://api. jquery. com/jQuery. ajax/”。 

$ .ajax() 方 法 的 返回 值 是 一 个 jqXHR(jQuery XMLHttpRequest) 对 象 ,这 代表 着 在 本 
地 浏览 器 中 创建 的 XMLHttpRequest 对 象 , 例 如 : 


var jqxhr = $ .ajax({ url: "test.php", type: get }); 


获取 到 jqXHR 对 象 后 ,就 可 以 通过 它 的 responseText 等 属性 访问 响应 数据 ,还 可 以 通 
过 它 的 方法 进行 回调 处 理 。jqXHR 对 象 的 常用 回调 方法 如 下 。 

(1) jqXHR. done(function( data, textStatus, jgXHR ) {)): 请 求 处 理 成 功 时 的 回调 
方法 。 

(2) jqXHR. fail(function( jqXHR, textStatus, errorThrown ) {)): 请 求 处 理 失 败 时 
的 回调 方法 。 

(3) jgXHR. always(function( data|jqXHR ， textStatus, jgXHR |errorThrown ) { ))， 
请 求 处 理 完 成 (done 和 fail 回调 后 ) 时 的 回调 方法 。 

可 以 看 出 这 些 回 调 方法 与 $.ajax() 中 的 几 个 回调 属性 相对 应 ,并 对 这 些 回 调 属性 做 了 

些 优化 。 用 户 既 可 以 在 $.ajax() 请 求 中 使 用 回调 属性 ,也 可 以 在 jgXHR 对 象 上 使 用 巨 

调 方法 。 请 看 以 下 示例 : 


































































































var jqxhr = $ .ajax({ url: "test.php", type: get }); 
jqxhr. done(function( ) { alert( "success" ); }); 
jqxhr. fail()(function( ) { alert( "error" ); }); 
jqxhr.always()(function( ) { alert( "complete" ); }); 


在 实际 编程 中 ,经 常 使 用 链 式 调用 的 语法 ,例如 : 
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$ .ajax({ url: "test.php"，type: get }) 
.done(function( ) { alert( "success" ); }) 
.fail()(function( ) { alert( "error" ); }) 
.always()(function( ) { alert( "complete" ); 


本 节 的 第 1 个 示例 使 用 的 就 是 这 种 链 式 调用 的 语法 。 
另外 ,由 于 jqXHR 对 象 实现 了 Promise 接口 ,该 接口 也 允许 调用 jQuery 的 ajax 方法 ， 
即 在 jdaXHR 对 象 上 还 可 以 直接 调用 success .error 等 方法 。 





2. 使 用 高 层 AJAX API 


使 用 高 层 接口 可 以 用 最 小 的 代码 量 发 送 常 见 的 AJAX 请 求 。 
1) jQuery get 方法 
jQuery get 方法 用 于 发 送 一 个 get 请 求 ,原型 如 下 : 


$ .get( url [, data ] [，success(data，textStatus，jqXHR) ] [, dataType ] ) 


第 1 个 参数 为 请 求 的 url, 其 他 参数 都 可 以 省 略 ; 第 2 个 参数 代表 要 发 送 的 数据 ; 第 3 
个 参数 为 请 求 成 功 时 的 回调 函数 ; 第 4 个 参数 代表 期 望 从 服务 器 返回 的 数据 类 型 。 请 看 以 
下 示例 : 


$ .get('ajax/test. html', function(data) { 
$ ('#result'). html( data); 
}D); 


这 段 代码 将 使 用 get 方法 请 求 test. html 的 内 容 ,并 将 获取 到 的 数据 显示 在 ID 为 result 
的 元 素 上 。 

get 方法 的 返回 值 类 型 同样 是 一 个 jqXHR 对 象 ,这 意味 着 用 户 同样 可 以 在 该 对 象 上 调 
用 其 done、fail、always 等 扩展 方法 以 及 success、error 等 ajax 方法 ,例如 : 


var jqxhr = $ .get("example.php", function() { 
alert("success"); 

出 

. success(function() { alert("second success"); }) 

.error(function() { alert("error"); }) 

.complete(function() { alert("complete"); }); 

jqxhr. complete( function(){ alert("second complete"); }); 


对 于 同一 个 回调 允许 绑 定 多 个 函数 ,本 例 中 对 success 和 complete 事件 都 绑 定 了 两 个 
回调 函数 ,它们 会 被 依次 调用 。 
在 get 方法 中 可 以 发 送 请 求 数据 ,例如 : 


$ .get("test.php"，{ name: "John"，time: "2pm" } ) 
$ .get("test.php", { 'choices[]': ["Jon", "Susan"]} ); 
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第 1 条 调用 以 “名 - 值 ” 对 的 形式 包装 了 多 个 数据 ,第 2 条 调用 以 数组 的 形式 传递 多 个 数 
据 。 不 管 哪 种 方式 ,最 后 都 会 被 序列 化 为 请 求 字符 串 的 形式 附加 在 url 的 后 面 发 送 。 

2) jQuery getJSON 方法 

jQuery getJSON 方法 向 服务 器 端 发 送 GET 请 求 ,并 返回 JSON 格式 的 数据 ,原型 
如 下 : 





























jQuery. getJSON( url [, data ] [, success(data, textStatus, jqXHR) ] ) 


相当 于 以 下 的 AJAX 请 求 ， 





$ .ajax({ dataType: "json"， url: url, data: data, success: success }); 


例如 : 


$ .getJSON( 'ajax/test. json', function(data) { 
var items = []; 
$ .each(data, function(key, val) { items.push('<1i id="' + key + ">' + val + '</1i>'); }); 
$ ('<ul/>', { 'class': 'my— new— list', html: items. join( '') }).appendTo( 'body'); 

D); 


该 代码 通过 GET 请 求 从 服务 器 端 获 取 JSON 数据 ,然后 遍历 JSON 对 象 ,根据 每 个 对 
象 构 造 一 个 < li > 标签 ,最 后 形成 < ul > 在 页 面 上 显示 出 来 。 

3) jQuery post 方法 

jQuery post 方法 使 用 HTTP POST 请 求 从 服务 器 端 加 载 数据 ,原型 如 下 : 


jQuery. post( url [, data ] [, success(data, textStatus, jqXHR) ] [, dataType ] ) 

相当 于 以 下 的 AJAX 请 求 : 

$ .ajax({ type: "POST", url: url, data: data, success: success, dataType: dataType }); 
例如 : 


$ .post('ajax/test. html', function(data) { $ ('#result'). html(data); }); 


这 段 代 码 将 以 POST 方式 请 求 test. html 内 容 , 并 将 结果 显示 在 ID 为 result 的 元 
素 上 。 

在 发 送 POST 请 求 时 经 常 要 将 表单 控件 的 输入 打包 上 传 ,这 可 以 通过 一 个 序列 化 方法 
简单 实现 ,请 看 以 下 示例 : 





$ . post("test. php", $ ("#testform"). serialize()); 











这 段 代码 选择 了 ID 为 testform 的 表单 元 素 , 并 调用 其 serialize() 方 法 序列 化 所 有 
参数 。 
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4) load 方 法 
load 方法 从 服务 器 载 人 数据 并 且 将 返回 的 HTML 代码 插入 到 所 选 的 HTML 元 素 中 ， 
原型 如 下 : 














.load( url [, data ] [，complete(responseText，textStatus，XMLHttpRequest) ] ) 


例如 : 


$ ('#result'). load( 'ajax/test. html'); 


本 行 代码 将 通过 GET 请 求 获取 test. html 的 内 容 , 并 加 载 到 ID 为 result 的 对 象 中 
显示 。 


$('# result'). load( 'ajax/test. html', function() { alert('Load was performed. '); }); 


该 代码 指定 了 success 方法 ,可 以 在 加 载 完 数据 后 通过 告警 框 显 示 提 示 信 息 。 
使 用 jQuery 选择 器 还 可 以 只 加 载 文档 中 的 部 分 内 容 , 例 如 : 


$ ('#result'). load( 'ajax/test.html # container'); 


这 里 只 加 载 了 test. html 中 ID 为 container 的 元 素 上 的 内 容 。 


(10.2 Web API 框架 
A 

为 了 在 异 构 的 分 布 式 计算 环境 中 提供 计算 服务 和 交换 数据 , Web Service 应 运 而 生 。 
Web Service 是 一 种 跨 平 台 的 远程 调用 技术 ,是 松 耦 合 . 可 复 用 的 软件 模块 ,目的 是 支持 路 
网 络 的 计算 机 间 的 互 操作 。 

传统 意义 上 的 Web Service 体系 结构 复杂 、 开 发 难度 较 大 且 执 行 效率 不 高 ,近年 来 一 种 
简化 风格 的 Web Service 越 来 越 深 入 人 心 , 即 REST 风格 的 Web Service。 它 抛弃 了 传统 
Web Service 的 复杂 架构 ,以 简单 高效、 易于 理解 的 方式 提供 HTTP 服务 ,方便 各 类 客户 端 
程序 调用 。 

Web API 是 随 ASP. NET MVC 4 一 起 发 布 的 框架 ,使 用 它 可 以 很 方便 地 构建 REST 
风格 的 Web Service ,为 应 用 开发 带 来 了 极 大 的 便利 。 


10.2.1 Web API 基础 











首先 通过 一 个 示例 看 一 下 Web API 的 基本 用 法 。 

例 10-3 使 用 Web API 创建 一 个 商品 查询 服务 ,可 以 获取 所 有 商品 的 列表 ,或 者 按 ID 
号 查询 指定 商品 的 信息 。 

(1) 创建 Web 项 目 : 使 用 Visual Studio 创建 Web 项 目 , 取 名 为 ProductsApp; 在 项 目 
模板 列表 中 选择 “ 空 ”模板 ,并 选中 核心 引用 中 的 Web API 复 选 框 ,如 图 10-3 所 示 。 

(2) 创建 模型 : 打开 解决 方案 资源 管理 器 , 右 击 其 中 的 Models 文件 夹 ,选择 “添加 ”一 
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新 建 ASP.NET 项 目 - ProductApp 























各 普 
远 和 模板 (9): 
下 | 用 于 6 建 ASP.NET 应 用 和 序 的 空 项 目 樟 板 。 此 楼 板 中 没 
ASP.NET 452 模板 局 有 任何 内 容 . 
| Zessz 
国 看 == 
E Web Forms MVC Web API Single Page 
Application 
后 蚤 
Azure API App Azure Mobile 
(Preview) Service 
ASP.NET 5 横 板 
. 。 
| 更 身份 尖 (A) 
RE -| 身 盒 验 还 不 进行 身份 验证 
为 以 下 项 看 加 文件 夫 和 核心 引用 > Microsoft Azure 
Web Forms DMvC 回 web Apl © 口 bestinthe doud 


口 逢 加 单元 油 武 (U) 


测试 项 目 名 称 [D。 |ProductAPP Tests 











图 10-3 创建 Web API 项 目 


“类 ”, 在 打开 的 对 话 框 中 输入 类 名 Product. cs, 单 击 “ 添 加 ”按钮 创建 Product 类 ,并 为 其 定 
义 属性 ,如 下 : 


public class Product { 
public int Id { get; set; } 
public string Name { get; set; } 
public string Category { get; set; } 
public decimal Price { get; set; } 


(3) 创建 控制 器 : 在 Web API 中 控制 器 用 于 处 理 HTTP 请 求 。 这 里 要 创建 一 个 控制 
器 ,实现 两 项 核心 功能 ,一 是 获取 所 有 商品 的 列表 ,二 是 根据 商品 ID 获取 指定 商品 信息 。 

在 解决 方案 资源 管理 器 中 右 击 Controllers 文件 夹 ,选择 “添加 ”一 “控制 器 ”, 在 添加 基 
架 对 话 框 中 选择 “Web API 2 控制 器 - 空 ", 单 击 “ 添 加 ”按钮 ,为 控制 器 输入 名 称 


“ProductsController”。 











双击 打开 ProductsController. cs ,为 其 输入 以 下 代码 : 


using System; 

using System. Collections. Generic; 
using System. Net; 

using System. Web. Http; 

using ProductsApp. Models; 
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namespace ProductsApp. Controllers { 
public class ProductsController : ApiController { 
Product[ ] products = new Product[] { 
new Product { Id = 1, Name = "Tomato Soup", Category = "Groceries", Price = 1 }， 
new Product { Id = 2, Name = "Yo— yo", Category = "Toys", Price = 3.75M }, 
new Product { Id = 3, Name = "Hammer", Category = "Hardware", Price = 16.99M} 
}; 
public IEnumerable < Product > GetAllProducts() { return products; } 
public IHttpActionResult GetProduct(int id) { 
var product = products.FirstOrDefault((p) => p.Id == id); 
if (product == null) { return NotFound(); } 
return Ok( product); 


为 了 简单 起 见 , 这 里 并 没有 将 商品 数据 保存 到 数据 库 中 ,而 是 定义 了 一 个 数组 存放 数 
据 , 当 然 在 实际 应 用 中 要 使 用 数据 库 。 

该 控制 器 中 定义 了 两 个 Web 方法 ,GetAllProducts 方法 返回 所 有 商品 的 列表 ,类 型 为 
IEnumerable < Product >; GetProduct 方法 则 按 ID 查找 一 件 商品 ,并 返回 IHttpActionResult 接 
口 对 象 。 两 个 方法 的 代码 都 不 难 理解 ,这 里 不 再 详细 讨论 。 

至 此 已 经 创建 了 两 个 简易 的 Web Service, 用 户 可 以 通过 浏览 器 来 测试 。 启 动 该 项 目 ， 
在 浏览 器 的 地 址 栏 中 输入 以 下 url 地 址 : 


http://localhost: 端 口号 /api/products 


可 以 看 到 返回 的 结果 ,如 图 10-4 所 示 。 


| [DD localhost:58982/api/pro x 全 


| € 3 © BD localhost58982/api/products 甸 说 三 





用 This XML file does not appear to have any style information associated with it 
The document tree is shown belom. 


WhrrayOfProduct xmlns:i="http://www. wa. org/2001/XML Schena-instance” 
xnlre="http://schenas. dat acontract,. org/200/071/ProductQry. Models” > 
vProduct> 
Category’Groceries /Category> 
<IDIYIDY 
lane’Tonato Soup /Nane> 
《Price>1CPrice> 
/Product> 
vProduct> 
Category)ToysC/Category) 
<Id)2Y 1d) 
Nane Yo-yo /Nane> 
<Price)3. 75 人 /Pricey 
</Product》 
vProduct> 
Category Mardyared/Category) 
《Id>34%Id> 
Nane Hanmer /Hane> 
《Price>16.99C/Price> 
/Product> 
/ArrayOfProduct> 





图 10-4 在 浏览 器 中 请 求 Web API 返 回 的 结果 数据 
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在 浏览 器 窗口 打开 的 情况 下 按 F12 键 ,或 者 从 浏览 器 菜单 中 选择 “更 多 工具 ”一 “ 开 
发 者 工具 "命令 ,打开 如 图 10-5 所 示 的 工具 窗 格 ( 这 里 以 Chrome 浏览 器 为 例 , IE、Firefox 
等 浏览 器 也 具有 开发 者 工具 ,用 法 类 似 ); 单 击 项 部 的 Network 标签 ,可 以 跟踪 请 求 处 理 
的 过 程 。 刷 新 页 面 重新 发 送 请 求 , 在 开发 者 工具 的 请 求 列表 中 会 出 现 Products 请 求 , 单 
击 该 请 求 ,在 右 侧 窗 格 中 会 出 现 该 请 求 处 理 的 详情 。 从 Response Headers 响应 头 信息 中 
可 以 看 出 响应 的 Content-Type 为 application/xml, 即 服 务 器 端 返回 的 是 XML 格式 的 
数据 。 






































| € 3 GDIocalhost52812/apiypProducts 


This XIL file does not appear to have 民 口 Bements Console Sources Network Timeline Profies » 


any style information associated with | 二 mF | Ve | Pesevelog Disable cache | Notheotting 
it. The document tree is shom below. 





hner Hide da URLs 


v ChrrayofProduct 3 a 
sD:/ fw wa org/ 2001/ IL Schems Ors cs rs 


Name 
xnlne=" http://schenas. dat acontract. org/ 2004/07/ path 其 |Headers Preview Response Cookies Timing 


Ea VGeneral 
Category’Groceries /Category) <>| a Request URL: http;//localhost:52812/api/Prody 
IY Id> cts 


ane Tonat o Soup/ Wane> Request Method: GET 
CPrice) 1/Price) Status Code: ® 298 OF 


Product> < 入 
vProduct) Remote Address: [::1]:52812 


CategoryToys /Cat esory> 
Id)2Y 14> 
Nane YYo-yo /Wane > 
srty ee Content-Type: application/xnl; charsetutf-8 
vProduct) Date: Wed, 15 Mar 2017 91:21:35 GMT 
CCategory Harduare/Category) 
《Id)3GIH》 | | 
CHane "Hamner /Nane> 3 1 8598 transfered | Fnshe 
CPrice)16.99/Price> |[ ce 


© FF <ctopfamey 9 Preservelog 





图 10-5 使 用 开发 者 工具 跟踪 请 求 处 理 过 程 
下 面 测试 第 2 个 Web Service, 在 浏览 器 的 地 址 栏 中 输入 : 


http://localhost: 端 口号 /api/products/1 


返回 的 结果 如 图 10-6 所 示 。 

很 显然 ,url 中 最 后 的 “1 代表 商品 ID, 用 户 通过 这 种 REST 风格 的 Web Service 很 容 
易 访 问 需要 的 数据 。 与 传统 的 Web 请 求 返回 HTML 页 面 不 同 ,这 里 只 返回 了 XML 格式 
的 数据 ,由 客户 端 进一步 处 理 数据 ,并 将 其 展示 出 来 。 

(4) 在 客户 端 程序 中 调用 Web API: Web Service 创建 后 将 在 客户 端 创建 一 个 HTML 
页 面 ,使 用 AJAX 技术 来 调用 该 Web Service, 并 根据 返回 的 数据 动态 刷新 页 面 。 为 了 方便 
AJAX 编程 ,这 里 使 用 了 jQuery 框架 。 

在 ProductApp 项 目 中 新 建 一 个 名 称 为 index. html 的 页 面 ,使 用 以 下 代码 蔡 换 自动 生 
成 的 内 容 : 
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[localhost:52812/api/Pro” x 
€ 3 © BD localhost52812/api/Products/1 bm 








This XML file does not 民 口 | Bements Console Sources Network Timeline Profles » 


appear to have any style Om | Ve IT | Preevelog BDisablecache | Nothrotting 
information associated with = 二 
it，The document tree is | 目 hide data URLs 


Shown below, XHR 后 CSS Img Media Font Doc WS Other 


vProduct X | Headers | Preview Response Cookies Timing 
Xmlnsii= "httpi/Vwww,w3. org/ 2001/W]| vv 
ipetenee” General 
xnlne="http://schenas, dat acontrae- Request URL: http://1ocalhost:52812/api/Produ 
Category)Groceries /Catogory> cts/1 
<I)1Y/ Td> Request Method: GET 
<Nane Tonato Soup /Nane> Status Code: © 200 Ok 
<Prioe>1</Price> Remote Address: [; :1]:52812 
/Product> si 
VResponse Headers View source 
Cache-Controk no-cache 
Content-Length: 218 
Te Ca vad FRR Content-Type: application/xnl; charsetrutf-8 


Console - Emulation Rendering 





© “tpframe> 目 presemvelog 
> 








图 10-6 跟踪 按 ID 访问 商品 信息 的 方法 


<!ldoctype html > 
<html xmlns = "http://www. w3. org/1999/xhtml"> 
<head> <title> Product App </title> </head> 
<body> 
<div> 
<h2>All Products </h2> 
<ul id= "products" /> 
</div> 
<div> 
<h2 > Search by ID </h2 > 
< input type = "text" id = "prodId" size = "5" /> 
< input type = "button" value = "Search" onclick = "find();" /> 
<p id= "product" /> 
</div> 
<script src = "http://ajax.aspnetcdn. com/ajax/ jQuery/ jquery — 2.0.3.min. js"></script> 
<script> 
var uri = ‘'api/products'; 
$ (document). ready(function () { 
// 发 送 一 个 AJAX 请 求 
$ .getJSON(uri) 
.done(function (data) { 
// 成 功 ，'data' 包 含 一 个 商品 列表 
$ .each(data, function (key, item) { 
// 添加 一 个 商品 列表 项 
$ ('<1i>'，{ text: formatItem( item) }).appendTo( $ ('# products')); 
DD); 
By 
D); 


页 面 。 


自动 
的 列 
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function formatItem( item) { 
return item. Name + ': $' + item.Price; 
上 
function find() { 
var id = $('#prodId').val(); 
$ .getJSON(uri + '/' + id) 
.done(function (data) { 
$ ('#product'). text(formatItem(data)); 
]) 
.fail(function (jqXHR, textStatus, err) { 
$ ('#product'). text('Error: ' + err); 
DD); 
js 
</script > 
</body > 
</html > 


启动 该 项 目 ,运行 结果 如 图 10-7 所 示 。 


D product App 
€ 3 CIDIlocalhost52812/indexhtml 





All Products 


» Tomato Soup: $1 
® Yo-yo: $3.75 
® Hammer: $16.99 


Search by ID 
| 可 


Tomato Soup: $1 





图 10-7 index. html 页 面 的 运行 效果 





AJAX 与 Web API 


在 上 述 代码 中 使 用 了 getJSON 方法 发 送 AJAX 请 求 , 并 返回 JSON 格式 的 数据 ; 使 用 
done 方 法 指定 匿名 回调 函数 , 当 AJAX 请 求 成 功 返 回 时 ,根据 返回 的 JSON 数据 来 刷新 






































在 代码 开始 的 位 置 注册 了 $ (document). ready 回调 方法 ,该 方法 会 在 页 面 加 载 就 绪 时 
调用 ; 在 该 方法 中 发 送 了 第 1 个 AJAX 请 求 , URL 为 /api/products, 以 获取 所 有 商品 




















表 , 返 回 结 果 是 一 个 JSON 数组 ,如 下 : 


[ {"Id":1,"Name":"Tomato Soup", "Category" :"Groceries", "Price" :1.0}, 
{"Id":2,"Name" :"Yo— yo", "Category" :"Toys", "Price":3.75}, 
{"Id":3,"Name" :"Hammer", "Category" :"Hardware", "Price":16.99} ] 





当 输 入 ID 号 1 并 单 击 Search 按钮 时 调用 find 函数 发 送 第 2 个 AJAX 请 求 ,URL 为 
/api/products/1 ,返回 一 件 产品 信息 的 JSON 字符 串 ,如 下 : 
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{"Id":1, "Name" :"Tomato Soup", "Category" :"Groceries", "Price":1.0} 


使 用 开发 者 工具 跟踪 程序 的 运行 ,如 图 10-8 所 示 。 可 以 看 到 当 请 求 index. html 页 面 
时 系统 连续 发 送 了 3 次 HTTP 请 求 : 第 1 次 请 求 该 页 面 本 身 ; 因为 该 页 面 中 引用 了 jQuery 
库 , 所 以 第 2 次 请 求 下 载 相 应 的 JS 文 件 ; 当 页 面 加 载 就 绪 时 ,自动 触发 了 ready 回调 函数 ， 
请 求 获取 商品 列表 的 Web Service。 单 击 第 3 个 请 求 (products) ,在 右 侧 窗 格 中 可 以 查看 该 
请 求 处 理 的 详情 。 





4 3 © Blocalhost52812/indexhtml 
| OD | Bements Console Sources Network Tomelne Profles Resources Audits 
All Products @O|m | ve TE|BPeneloy BDsble cche | Nothoting " 





| ride da urs 图 WR 5 Css ime Meda Font Doc WS Other 


[Be [rma | ehow Rome Goes 
= v6General 
Request URL: mttp://localhost:52812/api/preducts 
Search by ID i | 


203minjz 
Status Code ® 200 OF 
aspnetcdnconv apa/fQvery 
Search ee Remote Address: 1::1];52812 


| Content -Type: application/json; charseteutf-S 
De 38 rd Date: Wed, 15 Par 2917 91:47;27 ONT 

Consoke Emulabon Rendenng 

© F coplamey v BPresevelog 


》 








图 10-8 跟踪 index. html 页 面 的 请 求 


在 页 面 的 文本 框 中 输入 ID 号 1, 单 击 Search 按钮 ,在 开发 者 工具 窗口 中 可 以 跟踪 到 该 请 
求 ,如 图 10-9 所 示 。 单 击 查看 详情 ,从 右 侧 的 Response 窗 格 中 可 以 看 到 返回 的 JSON 数据 。 


[gprs 


€ 3 © Blocalhosts2812/indexhtml 
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民 0 | Hements Console Sources Network Timelne Profles Resources Audits 
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a ben ¥% Headers Preview | Response Cookies Timng 


| | ld":1, “Nome":"Tomato Sour", "Category*:"Groceries”, Price":1.0} 


Search by ID 


[| [Eee 


Tomato Soup: $1 
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图 10-9 跟踪 获取 单个 商品 信息 的 请 求 
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注意 观察 Header 标签 下 的 内 容 , Response Header 下 的 Content-Type 类 型 变 成 了 
application/json, 这 是 因为 在 客户 端 调用 了 getJSON 方法 发 送 AJAX 请 求 ,于 是 浏览 器 将 
请 求 头 中 的 Accept 项 设 定 为 application/json, 告 诉 服务 器 需要 接收 JSON 类 型 的 数据 ,所 
以 服务 器 端 会 自动 将 返回 的 数据 组 装 成 JSON 格式 的 字符 串 。 


10.2.2 Web API 中 的 路 由 


在 ASP.NET Web API 中 使 用 控制 器 类 处 理 请 求 , 控 制 器 中 定义 的 公共 方法 被 称 为 
action 方法 ,或 简称 为 action。 当 Web API 框架 收 到 一 个 请 求 时 会 选择 合适 的 action 来 处 
理 请 求 ,这 项 工作 被 称 为 “路 由 ”。 至 于 实现 路 由 选择 ,这 就 要 用 到 “路 由 表 ”。 

选择 App_Start 文件 夹 ,双击 打开 其 中 的 WebApiConfig. cs 文件 ,可 以 看 到 系统 预先 
定义 的 路 由 表 : 























config. Routes. MapHttpRoute( 
name: "DefaultApi", 
routeTemplate: "api/{controller}/{id}", 
defaults: new { id = RouteParameter. Optional } 
); 


段 代 码 在 路 由 表 中 配置 了 一 个 名 为 DefaultApi 的 路 由 项 ,对 应 的 URL 模板 如 下 : 


"api/{controller}/{id}" 


其 中 api 为 路 由 前 级 ,{controller} 和 (id}) 都 是 占 位 符 ,在 defaults 属性 中 将 id 占 位 符 定 
义 为 可 选项 。 之 所 以 要 使 用 api 路 由 前 级 ,主要 是 为 了 与 MVC 路 由 相 区 分 。 例 如 ,在 同一 
个 项 目 中 使 用 /contacts 路 径 引 导 到 MVC 控制 器 ,而 用 /api/contacts 路 径 引 导 到 Web API 
控制 器 ,这 样 就 可 以 在 一 个 项 目 中 组 合 使 用 多 项 技术 而 不 会 产生 冲突 。 

当 Web API 框架 接收 到 一 个 HTTP 请 求 时 , 它 会 尝试 使 用 路 由 表 中 的 各 个 模板 去 匹 
配 该 请 求 的 URL; 如 果 没 有 一 个 路 由 项 能 匹配 上 ,就 会 返回 一 个 “404” 错 误 页 面 ; 一 旦 找到 
一 个 匹配 项 ,框架 就 会 选择 对 应 的 控制 器 和 action 方法 来 处 理 请 求 。 

为 了 简化 控制 器 和 action 的 选择 ,Web API 框架 中 使 用 了 一 些 约定 。 

(1) 为 匹配 合适 的 控制 器 ,框架 会 在 {controller} 值 的 后 面 添加 Controller 字符 串 来 构 
造 类 名 。 例 如 根据 api/products 路 径 ,控制 器 的 类 名 应 为 ProductsController。 

(2) 为 匹配 合适 的 action 方法 , Web API 会 首先 确定 该 HTTP 请 求 方式 (GET、POST、 
PUT、DELETE) ,然后 查找 以 该 请 求 方式 作为 名 称 前 缀 的 action。 例 如 收 到 一 个 GET 请 求 时 ， 
框架 会 查找 控制 器 中 形 如 “Get xxx ”的 方法 ,如 GetProduct 和 GetAllProducts 等 形式 的 
action 方法 。 

(3) 在 路 由 模板 中 的 其 他 占 位 符 变 量 (例如 {id) ) 都 会 被 映射 为 action 方法 的 参数 。 

假如 定义 了 以 下 控制 器 : 














public class ProductsController : ApiController { 
public void GetAllProducts() { } 
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public IEnumerable < Product > GetProductById(int id) { } 
public HttpResponseMessage DeleteProduct( int id){ } 


表 10-2 列 出 了 一 些 可 能 的 请 求 及 其 映射 方式 。 
表 10-2 可 能 的 请 求 及 其 映射 的 方式 




















请 求 方式 URI 路径 action 方 法 参 数 
GET api/products GetAllProducts 无 
GET api/products/4 GetProductByld 4 
DELETE api/products/4 DeleteProduct 4 
POST api/ products 无 法 匹配 


以 上 列 出 了 一 些 基 本 的 路 由 机 制 , 主 要 利用 了 一 些 命名 约定 。 实 际 的 Web 应 用 比较 复 
杂 , 还 需要 一 些 人 额外 的 路 由 方法 。 
(1) 可 以 使 用 注解 来 明确 指定 一 个 action 可 以 处 理 什么 样 的 HTTP 请 求 , 例 如 : 





public class ProductsController : ApiController { 
[HttpGet] 
public Product FindProduct(id) {} 


用 户 还 可 以 使 用 AcceptVerbs 注解 为 一 个 action 指定 多 种 请 求 方式 ,例如 : 


public class ProductsController : ApiController { 
[AcceptVerbs("GET", "HEAD")] 
public Product FindProduct(id) {} 


(2) 为 了 精确 映射 action, 可 以 将 action 名 称 也 包含 在 路 由 表 中 ,请 看 以 下 路 由 定义 : 


routes. MapHttpRoute( 
name: "ActionApi", 
routeTemplate: "api/{controller}/{action}/{id}", 
defaults: new { id = RouteParameter. Optional } 
); 


该 模板 中 包含 了 {action) 变量 ,可 以 直接 映射 到 控制 器 中 的 action 方法 ,但 通常 要 在 
action 方法 中 使 用 注解 来 指明 其 请 求 方 式 。 例 如 : 
public class ProductsController : ApiController { 


[HttpGet] 
public string Details( int id); 


如 果 收 到 一 个 URI 为 “api/products/details/1” 的 GET 请 求 , 则 会 映射 到 该 控制 器 中 
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的 Details 方法 进行 处 理 。 
户 还 可 以 使 用 ActionName 注解 为 action 方法 指定 别名 ,例如 : 




















public class ProductsController : ApiController { 
[HttpGet] 
[ActionName("Thumbnail")] 
public HttpResponseMessage GetThumbnail Image( int id); 


[HttpPost] 

[ActionName("Thumbnail")] 

public void AddThumbnailImage( int id); 
' 


当 请 求 URI 形 如 “api/products/thumbnail/id” 时 ,GET 请 求 将 被 映射 到 第 1 个 方法 ， 
而 POST 请 求 将 被 映射 到 第 2 个 方法 。 
若 不 允许 控制 器 中 的 某 个 方法 被 映射 为 action, 可 以 使 用 NonAction 注解 ,例如 : 


[NonAction] 
public string GetPrivateData() { ...} 


这 样 即使 某 个 请 求 的 URI 能 够 匹配 到 该 方法 ,Web API 框架 也 不 会 调用 该 方法 。 
10.2.3 Web API 中 的 返回 值 


从 例 10-3 可 以 看 出 , 当 向 Web API 请 求 数据 时 ,服务 器 端 会 根据 客户 端 请 求 的 方式 不 
同 返 回 不 同 格式 的 数据 。 那 么 , Web API 是 如 何 将 控制 器 中 各 方法 的 返回 值 转化 为 不 同 格 
式 的 HTTP 响应 消息 的 呢 ? 下 面 进 行 简单 剖析 。 

控制 器 的 action 方法 可 以 返回 4 种 类 型 的 数据 , 即 void 类 型 IHttpActionResult 类 
型 .HttpResponseMessage 类 型 以 及 其 他 类 型 。 

(1) 若 返回 void 类 型 数据 ,Web API 框架 会 创建 一 个 空 的 响应 消息 ,其 状态 码 为 204， 
表示 没有 页 面 内 容 。 

(2) 车 返回 HttpResponseMessage 类 型 的 数据 , 则 Web API 框架 会 直接 调用 该 对 象 的 
相关 属性 来 生成 HTTP 响应 ,这 种 方式 的 优点 是 可 以 通过 HttpResponseMessage 对 象 对 
响应 消息 施加 很 多 控制 ,详情 请 读者 查阅 MSDN 文档 。 

若 在 创建 HttpResponseMessage 对 象 时 向 其 传人 一 个 领域 对 象 .Web API 框架 会 使 用 
一 个 Media Formatter 对 象 对 领域 对 象 进行 序列 化 ,并 将 序列 化 的 结果 插入 到 响应 消息 中 ， 
请 看 以 下 示例 : 


public HttpResponseMessage GetAllProducts() { 
IEnumerable< Product > products = GetProductsFromDB(); 
// 将 列表 内 容 写 人 响应 体 中 
HttpResponseMessage response = 
Request. CreateResponse( HttpStatusCode. OK, products ); 
return response; 
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这 里 调用 Request 对 象 的 CreateResponse 方法 创建 一 个 HttpResponseMessage 对 象 ， 
该 方法 的 第 1 个 参数 为 响应 状态 码 , 第 2 个 参数 为 Product 的 集合 。 于 是 Web API 框架 会 
根据 请 求 消息 中 的 Accept 头 来 选择 一 个 合适 的 Formatter ,将 对 象 集合 序列 化 为 指定 格式 
的 数据 发 送 给 客户 端 。Web API 框架 内 置 有 支持 XML JSON 等 数据 格式 的 Formatter, 可 
以 自动 将 服务 器 端的 对 象 序列 化 为 XML 格式 或 JSON 格式 的 数据 , 若 想 转化 成 其 他 格式 
的 数据 ,需要 自 定义 Formatter ,详情 请 读者 参阅 微软 技术 文档 。 

(3) 车 返回 IHttpActionResult 类 型 的 数据 ,系统 则 会 自动 调用 IHttpActionResult 接 
口中 定义 的 ExecuteAsync 方 法 来 创建 HttpResponseMessage 实例 ,然后 根据 该 实例 生成 
响应 消息 。 

在 System. Web. Http. Results 命名 空间 中 定义 了 多 个 IHttpActionResult 的 实现 类 ， 
所 以 在 控制 器 的 action 方法 中 ,可 以 使 用 ApiController 定义 的 帮助 方法 自动 生成 相应 的 
IHttpActionResult 对 象 来 返回 数据 。 例 如 在 例 10-3 中 有 以 下 代码 : 


























public IHttpActionResult GetProduct(int id) { 
var product = products.FirstOrDefault((p) =>p.Id == id); 
if (product == null) { 
return NotFound(); 


} 
return Ok(product); 
} 


首先 在 products 集合 中 检索 指定 的 product; 车 未 找到 , 则 调用 ApiController 中 定义 
的 NotFound 方法 帮助 生成 一 个 “404 NOT FOUND” 响 应 页 面 ; 若 找到 , 则 调用 Ok 方法 帮 
助 创建 一 个 成 功 的 响应 页 面 ,并 将 product 数据 包装 进去 。 

(4) 车 返回 其 他 类 型 的 数据 ,Web API 框架 会 自动 选择 一 个 合适 的 media formatter 来 
序列 化 数据 ,并 创建 一 个 状态 码 为 200( 成 功 ) 的 响应 ,将 序列 化 后 的 数据 包装 进去 。 请 看 
例 10-3 中 的 以 下 代码 : 


public IEnumerable < Product > GetAllProducts() { 
return products; 


这 个 action 方法 返回 领域 对 象 的 集合 , Web API 框架 需要 选择 合适 的 Formatter 来 序 
列 化 数据 。 当 请 求 “/api/products” 时 ,系统 自动 选择 默认 的 XmlMediaTypeFormatter 进行 
处 理 , 所 以 客户 端 收 到 的 是 XML 格式 的 数据 ; 而 在 调用 getJSON 方法 发 送 请 求 时 服务 器 
端 会 选择 “JsonMediaTypeFormatter” 进 行 处 理 , 所 以 返回 的 是 JSON 格式 的 数据 。 


(10.3 单 页 应 用 程序 示例 
A 











单 页 应 用 程序 (Single-page application, SPA) 是 一 种 新 的 Web 应 用 开发 模式 , 近 些 年 
获得 了 快速 发 展 。 传 统 的 Web 应 用 由 很 多 个 页 面 构成 , 当 请 求 某 个 页 面 时 通常 要 在 服务 器 
端 生成 完整 的 页 面 并 下 载 到 客户 端 ,这 种 方式 服务 器 端的 负荷 较 重 , 且 传 输 的 数据 量 大 。 
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SPA 充分 利用 了 Web API 与 AJAX 技术 , 它 在 应 用 启动 时 加 载 一 个 页 面 ,以 后 将 不 再 重新 
加 载 整个 页 面 ,而 是 仅仅 刷新 页 面 的 部 分 内 容 。 在 SPA 应 用 中 所 有 的 请 求 都 在 客户 端 以 
AJAX 方 式 发 出 ,请 求 的 目标 不 再 是 Web 页 面 ,而 是 Web API; 服务 器 端 也 不 再 返 区 
HTML 页 面 ,而 是 JSON 或 XML 数据 ,客户 端 再 使 用 某 个 编程 框架 解析 数据 并 刷新 局 部 
页 面 。 
可 以 看 出 SPA 方式 有 利于 构建 松 耦合 的 系统 ,有 利于 减轻 服务 器 端的 负荷 ,也 有 利于 
减少 客户 端 与 服务 器 间 传 输 的 数据 量 。 目 前 大 量 的 移动 应 用 就 是 基于 SPA 方式 开发 的 。 
下 面 以 一 个 单 页 应 用 的 实例 来 说 明 如 何 综合 使 用 Web API、AJAX 等 技术 来 实现 松 耦 合 的 
应 用 开发 。 
例 10-4 创建 一 个 书籍 管理 的 单 页 应 用 程序 ,如 图 10-10 所 示 ,能 够 实现 列表 显示 、 详 
情 显 示 以 及 添加 书籍 等 基本 功能 。 
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图 10-10 书籍 管理 程序 的 运行 效果 


(1) 创建 Web 项 目 : 新 建 ASP. NET Web Application 项 目 , 取 名 为 BookService ,并 选 
择 Web API 模 板 。 

(2) 创建 模型 : 本 例 中 需要 创建 两 个 模型 类 , 即 Book 和 Author, 分 别 代表 书籍 和 作者 。 

在 解决 方案 资源 管理 器 中 右 击 Models 文件 夹 , 选 择 “ 添 加 ”类 ”, 然 后 输入 类 名 
“Author. cs" 并 确定 ,在 打开 的 编辑 窗口 中 使 用 以 下 代码 替换 原来 的 代码 : 


using System. ComponentMode1. DataAnnotations; 
namespace BookService.Models { 
public class Author { 
public int Id { get; set; } 
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[Required] 
public string Name { get; set; } 











上 同样 的 方式 创建 Book 类 ,代码 如 下 : 








using System. ComponentMode1. DataAnnotations; 
namespace BookService. Models { 
public class Book{ 
public int Id { get; set; } 
[Required] 
public string Title { get; set; } 
public int Year { get; set; } 
public decimal Price { get; set; } 
public string Genre { get; set; } 


// 外 键 约束 
public int AuthorId { get; set; } 
// 导航 属性 
public Author Author { get; set; } 


} 


在 两 个 模型 类 建 好 后 构建 整个 工程 ,以 便 编译 新 加 入 的 两 个 模型 类 。 

(3) 创建 控制 器 : 在 解决 方案 资源 管理 器 中 打开 Controllers 文件 夹 , 可 以 看 到 Visual 
Studio 自动 为 用 户 创建 的 两 个 控制 器 HomeController 和 ValuesController ,首先 删除 
ValuesController 控制 器。 

右 击 Controllers 文件 夹 ,选择 “添加 ”一 “控制 器 "命令 ,在 添加 基 架 对 话 框 中 选择 “包含 
操作 的 Web API 2 控制 器 (使 用 Entiry Framework)”, 并 单 击 “ 添 加 ”按钮 ; 在 随后 弹出 的 
“添加 控制 器 ?对 话 框 中 选择 Author 模型 类 , 单 击 “ 数 据 上 下 文 类 ”后 面 的 “十 "图 标 以 添加 
新 的 Context 类 ,并 保持 类 名 BookServiceContext 不 变 ,选中 “使 用 异步 控制 器 操作 " 复 选 
框 ,如 图 10-11 所 示 。 





| ): Author (BookService. Models) 


| WE FD): Bookservice Models BookServiceContext 
| 
辐 使 用 异步 控制 器 组 作 (A) 


控制 器 名 称 (QO: AuthorsController 





图 10-11 创建 AuthorsController 控制 器 


EB 


做 


击 “ 添 加 ”按钮 ,系统 将 创建 Web API 控制 器 AuthorsController. cs ,并 同时 创建 数据 
库 上 下 文 类 BookServiceContext. cs; 重新 构建 系统 以 便 编译 这 两 个 类 。 
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以 相同 的 方式 为 Book 模型 类 创建 控制 器 ,注意 在 “数据 上 下 文 类 ”下 拉 列 表 框 中 直接 
选择 已 创建 好 的 BookServiceContext 类 。 

(4) 使 用 代码 优先 的 迁移 工具 生成 数据 库 : 为 演示 方便 ,这 里 将 根据 定义 好 的 Author 
和 Book 模型 类 自动 生成 数据 库 , 并 使 用 迁移 工具 向 库 中 添加 初始 数据 。 

在 Visual Studio 中 选择 “工具 ”>“Nuget 包 管 理 器 ”程序 包 管理 咒 控 制 台 ”, 在 "PM 
>” 提 示 符 后 输入 以 下 命令 并 回 车 执行 : 



































Enable - Migrations 


该 命令 将 在 工程 中 建立 一 个 名 为 Migrations 的 文件 夹 ,并 自动 生成 Configuration. cs 


文件 ,该 文件 中 包含 名 为 Seed 的 方法 ,用 于 实现 数据 迁移 。 这 里 用 一 段 代 码 蔡 换 Seed 
方法 : 











protected override void Seed( BookService. Models. BookServiceContext context) { 
context, Authors. AddOrUpdate(x =>x.Id, 
new Author() { Id = 1, Name = "Jane Austen" }, 
new Author() { Id = 2, Name = "Charles Dickens" }, 
new Author() { Id = "Miguel de Cervantes" } 
); 
context. Books. AddOrUpdate(x => x, Id, 
new Book() { Id = 1, Title = "Pride and Prejudice", Year = 1813, AuthorId = 1, 
Price = 9.99M, Genre = "Comedy of manners" }, 
new Book() { Id = 2, Title = "Northanger Abbey", Year = 1817, AuthorId = 1, 
Price = 12.95M, Genre = "Gothic parody" }, 
new Book() { Id = 3, Title = "David Copperfield", Year = 1850, AuthorId = 2, 
Price = 15, Genre = "Bildungsroman" }, 
new Book() { Id = 4, Title = "Don Quixote", Year = 1617, AuthorId = 3, 
Price = 8.95M, Genre = "Picaresque" } 


); 


3, Name 


} 


可 以 看 出 ,Seed 方法 中 借助 Context 类 向 Authors 表 和 Books 表 添 加 了 几 条 测试 数 
据 。 注 意 这 里 使 用 了 两 个 模型 类 ,需要 在 Configuration 类 的 起 始 位 置 加 入 “using Models;” 
命令 。 

在 程序 包 管理 器 控制 台中 执行 以 下 两 条 命令 : 


Rdd - Migration Initial 
Update - Database 


第 1 条 命令 将 生成 建 库 的 代码 ,第 2 条 命令 将 执行 该 代码 。 至 此 测试 数据 库 建 立 完 
用 户 可 以 在 服务 器 资源 管理 器 中 创建 数据 库 连 接 , 并 查询 初始 数据 ,如 图 10-12 所 示 。 

(5) 定义 数据 传递 对 象 (Data Transfer Objects,DTO) : 直接 使 用 模型 对 象 在 各 层 之 间 
传递 数据 存在 许多 弊端 ,一 般 专门 定义 DTO 类 来 传递 数据 。 这 种 方法 具有 以 下 优势 : 

。 隐藏 不 允许 在 客户 端 显示 的 数据 项 ; 

。 减少 传递 的 数据 量 ; 
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展 务 器 资源 管理 蒜 -x 
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b 图 Authors 
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图 10-12 使 用 服务 器 资源 管理 器 连接 到 数据 库 


。 重新 组 织 数据 以 方便 使 用 ; 

。， 解 耦 服务 层 与 数据 层 之 间 的 关系 ; 

。 解决 模型 类 之 间 的 “循环 关联 "问题 。 

在 解决 方案 资源 管理 器 中 右 击 BookService 项 目 , 选 择 " 添 加 ”一 “新 建文 件 夹 ”命令 ,并 
修改 文件 夹 的 名 称 为 Dto。 然 后 在 Dto 文件 夹 中 添加 以 下 两 个 类 ; 





namespace BookService.Dto { 
public class BookDTO { 
public int Id { get; set; } 
public string Title { get; set; } 
public string AuthorName { get; set; } 
} 
} 
namespace BookService. Dto { 
public class BookDetailDTO { 
public int Id { get; set; } 
public string Title { get; set; } 
public int Year { get; set; } 
public decimal Price { get; set; } 
public string RuthorName { get; set; } 
public string Genre { get; set; } 


ji 





可 以 看 出 ,BookDetailDTO 中 包含 了 书籍 的 详细 信息 ,主要 用 于 书籍 详情 显示 页 面 ; 而 
BookDTO 中 只 包含 了 书籍 的 概要 信息 ,主要 用 于 书籍 列表 显示 页 面 。 下 一 步 将 改造 Book 
控制 器 中 的 相关 方法 ,以 使 用 DTO 传递 数据 。 

(6) 使 用 DTO 传递 数据 : 打开 BooksController 控制 器 .使 用 以 下 代码 替换 原 有 的 两 
个 get 方法 。 


























// GET api/Books 
public IQueryable < BookDTO > GetBooks() { 
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Var books = from b in db. Books 


select new BookDTO() { Id = b.Id，Title = b.Title, AuthorName = b. Ruthor.Name }; 
return books; 
i 
// GET api/Books/5 
[ResponseType(typeof (BookDetailDTO))] 
public async Task <IHttpActionResult > GetBook( int id) { 
Var book = await db.Books. Include(b =>b.Author).Select(b => 
new BookDetailDTO() { 
Id = b.Id，Title = b.Title, Year = b.Year, Price = b.Price, 
AuthorName = b. Author.Name, Genre = b.Genre 
}).SingleOrDefaultAsync(b =>b.Id == id); 
if (book == null) { return NotFound(); } 
return Ok(book); 
} 


第 1 个 get 方 法 使 用 LINQ 语法 从 DBContext 中 获取 书籍 列表 ,并 实现 从 实体 类 到 


DTO 的 转换 ; 第 2 个 get 方 法 在 Books 数据 集 上 调用 Include 方法 关联 到 Author 实体 , 实 
现 关联 数据 (AuthorName) 的 提前 加 载 ,并 在 此 基础 上 将 实体 数据 转换 为 DTO。 


最 后 注意 观察 PostBook 方法 ,其 原先 的 返回 值 为 Book 类 型 ,也 需要 修改 为 DTO 类 


型 ,代码 如 下 : 


[ResponseType(typeof (BookDTO) ) ] 
public async Task < IHttpActionResult > PostBook(Book book) { 
if (!ModelState. IsValid) { return BadRequest(ModelState); } 
db. Books. Rdd(book) ; 
await db. SaveChangesAsync( ); 
db. Entry( book). Reference(x => x.Author).Load(); 
var dto = new BookDTO() 
{ Id = book.Id, Title = book.Title, AuthorName = book.Author. Name }; 
return CreatedAtRoute("DefaultApi", new { id = book.Id }, dto); 
b 


(7) 创建 客户 端 代码 框架 : 本 例 的 客户 端 包含 3 项 主要 功能 , 即 显示 所 有 书籍 的 列表 、 
显示 选 定 书籍 的 详情 ,以 及 添加 一 本 书籍 的 信息 。 为 简化 客户 端 编程 ,本 例 使 用 了 

















ncelout 框架 。 


在 包 管理 器 控制 台 窗 口中 输入 以 下 命令 以 安装 Knockout 框架 。 


Install - Package knockoutjs 


Knockout 框架 采用 了 MVVM(Model-View-ViewModel) 的 设计 模式 ,如 图 10-13 所 





























示 : 客户 端 使 用 AJAX 技术 请 求 Web API, 服 务 器 端 返回 JSON 格式 的 数据 ,以 该 数据 作为 
Model; ViewModel 作为 UI 的 抽象 层 , 包 含 了 Model 中 要 展示 出 来 的 数据 ,并 将 Model 与 
View 隔离 开 来 ; View 作为 最 终 的 展示 界面 ,将 UI 组 件 与 ViewModel 中 的 属性 进行 绑 定 。 
下 面 根据 MVVM 模式 来 创建 客户 层 的 代码 框架 。 
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图 10-13” ”Knockout 框架 采用 的 MVVM 设计 模式 


在 解决 方案 资源 管理 器 中 右 击 Scripts 文件 夹 ,选择 “添加 ”一 “JavaScript 文件 ”命令 ， 
在 弹出 的 对 话 框 中 输入 名 称 *App” 并 单 击 “ 确 定 ” 按 钮 ,系统 将 创建 App. js 文件 。 
将 以 下 代码 粘贴 到 App. js 中 。 
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在 ViewModel 中 定义 了 error 属性 及 books 属性 ,前 者 的 类 型 为 observable, 代 表 可 以 





进行 数据 绑 定 的 单 值 数 据 , 当 绑 定 到 某 个 UI 控件 时 ,一 旦 该 属性 值 改变 会 通知 绑 定 到 它 
UI 控 件 以 更 新 其 状态 ; 后 者 的 类 型 为 observableArray, 即 可 进行 数据 绑 定 的 数组 ,这 种 
性 通常 绑 定 到 类 似 “< ul >” 等 列表 控件 上 。 

在 本 例 中 ,books 属性 包含 书籍 列表 信息 ,在 视图 模型 加 载 时 自动 调用 getAllBooks 
数 ,通过 AJAX 请 求 获取 到 所 有 书籍 的 信息 (返回 值 存放 在 data 中 ) ,并 将 其 包装 到 boo 
属性 中 。 

在 代码 的 最 后 调用 applyBindings 方法 实现 视图 模型 到 UI 控件 的 数据 绑 定 。 

为 方便 客户 端 加 载 App. js 脚本 及 Knockout 框架 脚本 ,可 以 将 这 些 资 源 打包 成 一 














的 
属 


函 





S 


三 


Bundle 文件 ,这样 可 以 加 快 资源 的 下 载 速 度 。 在 解决 方案 资源 管理 器 中 打开 App_Start 文 


件 夹 , 然 后 打开 BundleConfig. cs 文件 ,向 RegisterBundles 方法 中 添加 以 下 代码 : 


bundles. Add( new ScriptBundle("~ /bundles/app"). Include( 
"一 /Scripts/knockout - {version}. js", 
"一 /Scripts/app. js")); 


至 此 建立 了 基本 的 客户 端 代码 框架 。 
(8) 建立 客户 端 界面 : 单 页 应 用 只 需要 一 个 视图 文件 ,这 里 使 用 默认 的 起 始 文件 ， 
Views 一 Home 文件 夹 中 的 Index. cshtml。 打 开 该 文件 ,并 用 以 下 代码 蔡 换 原 有 内 容 : 


@section scripts { @Scripts.Render(" 一 /bundles/app") } 
<div class ="page - header"> <hl > BookService </hl > </div> 
<div class = "row"> 
<div class= "col - md- 4"> 
<div class= "panel panel - default"> 
<div class = "panel - heading"> <h2 class = "panel ~ title"> Books </h2 > </div> 
<div class= "panel — body"> 
<ul class = "list - unstyled" data - bind = "foreach: books"> 
eal 
< strong>< span data- bind = "text: AuthorName"></span></strong> : 
< span data - bind = "text: Title"></span> 
<small ><a href ="#">Details </a></small> 
</1i> 
</ul> 
</div> 
</div> 
<div class ="alert alert - danger" data- bind = "visible: error"> 
<Pp data- bind = "text: error"></P> 
</div> 
</div> 
<div class= "col -md-4"> 
<! -- TODO: Book details -一 > 
</div> 
<divclass= "col—- md- 4"> 
<! —— TODO: Add new book 一 一 > 
</div> 
</div> 


即 
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这 是 一 个 典型 的 BootStrap 布局 页 面 ,由 3 个 class 二 "col-md-4" 的 div 标签 构成 一 行 机 
格 。 第 1 个 div 用 来 显示 书籍 列表 ,第 2 个 div 用 来 显示 一 本 书 的 详情 ,第 3 个 div 用 来 显 
示 添 加 书籍 的 界面 。 
Knockout 框架 使 用 data-bind 属性 设置 视图 模型 与 UI 控件 之 间 的 绑 定 关系 , 见 代码 中 
加 粗 的 部 分 。 
对 于 视图 模型 中 的 books 属性 ,使 用 了 以 下 绑 定 方 法 : 













































































<ul class = "list— unstyled" data 一 bind = "foreach: books"> 


| 


以 看 出 ,将 books 属性 绑 定 到 了 < ul > 标签 上 ,而 foreach 限定 对 所 有 的 book 进行 迭 
代 , 将 每 本 书 绑 定 到 一 个 <1i> 标 签 上 。 
对 于 每 一 本 书 , 将 其 标题 和 作者 分 别 绑 定 到 一 个 < span > 标签 上 ,代码 如 下 : 





<span data — bind = "text: Title"></span> 
< span data — bind = "text: AuthorName"></span> 





如 果 AJAX 请 求 出 现 错误 ,错误 信息 将 被 保存 在 error 属性 中 ,这 里 使 用 了 一 个 < div > 
来 显示 错误 信息 ,请 注意 这 里 的 绑 定 方法 : 











<div class = "alert alert- danger" data- bind = "visible: error"> 
<p data- bind = "text: error"></p> 
</div> 


首先 使 用 了 data-bind 一 "visible: error" 将 error 属性 绑 定 到 < div > 标签 的 visible 属性 
上 ,这 样 当 error 为 空 时 该 < div > 不 会 显示 出 来 ,只 有 当 error 不 为 空 时 才 将 其 绑 定 到 <p > 
标签 的 text 属性 上 显示 出 来 。 

运行 该 程序 ,界面 如 图 10-14 所 示 。 
[ 国王 一 一 | 
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图 10-14 显示 书籍 列表 的 程序 界面 
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(9) 实现 书籍 详情 显示 : 首先 需要 在 App. js 中 添加 以 下 脚本 代码 获取 书籍 的 详情 
数据 。 


self.detail = ko.observable(); 
self. getBookDetail = function (item) { 
ajaxHelper(booksUri + item.Id, 'GET').done(function (data) { 
self. detail(data); 
D); 


这 里 定义 了 detail 属性 ,并 调用 AJAX 请 求 根 据 ID 获取 书籍 详情 ,最 后 将 详情 信息 
定 到 detail 属性 上 以 备 UI 标签 绑 定 使 用 。 
然后 更 改 书籍 列表 中 的 Details 超 链接 ,以 便 触 发 getBookDetail 函数 。 将 原来 的 < a > 
标签 修改 为 以 下 代码 : 


<a href ="#" data- bind = "click: $ parent.getBookDetail"> Details </a> 


这 里 使 用 data-bind 将 < a > 标签 的 click 事件 与 页 面 脚本 中 的 getBookDetail 函数 绑 定 
起 来 。 
最 后 将 布局 栅 格 中 的 第 2 个 < div > 内 容 蔡 换 成 以 下 代码 : 


< hotatal) = 
<divclass="col -md-4"> 
<div class= "panel panel- default"> 
<div class= "panel - heading"> <h2 class = "panel — title"> Detail </h2> </div> 
<table class = "table"> 
<tr><td> Author </td><td data— bind= "text: detail(). AuthorName"></td></tr> 
<tr><td>Title</td><td data- bind= "text: detail().Title"></td></tr> 
<tr><td> Year </td><td data- bind = "text: detail(). Year"></td></tr> 
<tr><td> Genre </td><td data - bind= "text: detail().Genre"></td></tr> 
<tr><td>Price</td><td data- bind= "text: detail().Price"></td></tr > 
</table> 
</div> 
</div> 
/Ro 


这 段 代码 定义 了 一 个 表格 ,并 将 detail 属性 的 各 个 数据 项 绑 定 到 < td > 标签 的 text 属 
性 上 。 

注意 代码 中 的 “<! 一 ko if:detail() 一 >” 部 分 , 它 的 作用 类 似 于 C 语言 中 的 条 件 编译 , 即 
当 detail 属性 的 值 不 为 空 时 这 段 内 容 才 会 在 页 面 上 显示 出 来 。 所 以 在 用 户 单 击 某 个 Detail 
链接 之 前 详情 标签 不 会 显示 出 来 。 

重新 运行 该 程序 ,并 单 击 某 书籍 后 面 的 Details 超 链 接 , 结 果 如 图 10-15 所 示 。 
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图 10-15 显示 书籍 列表 及 所 选 书籍 详情 























i 息 的 页 面 
(10) 实现 添加 书籍 的 功能 : 首先 考虑 视图 模型 ,在 App.js 中 添加 以 下 代码 。 


self.authors = ko.observableArray(); 
self.newBook = { 

Author: ko. observable(), 

Genre: ko. observable( ), 

Price: ko. observable( ), 

Title: ko. observable( ), 

Year: ko.observable() 


} 
var authorsUri = '/api/authors/'; 
function getAuthors() { 
ajaxHelper(authorsUri, 'GET').done(function (data) { 
self. authors( data); 
}D); 


} 
self.addBook = function (formElement) { 
var book = { 
AuthorId: self.newBook. Author(). Id, 
Genre: self.newBook.Genre(), 
Price: self.newBook.Price(), 
Title: self.newBook.Title(), 
Year: self.newBook. Year() 
| 
ajaxHelper( booksUri, 'POST', book). done(function (item) { 
self. books. push( item); 
5 
} 


getAuthors(); 


第 2 
定 到 


authors 属性 ,在 页 面 初始 化 时 会 自动 调用 该 函数 ; addBook 为 事件 函数 ,处 理 用 户 提交 的 
书籍 请 求 , Knockout 框架 会 从 请 求 中 获取 表单 数据 填充 给 newBook 属性 ,组 装 成 
book 对 象 ,并 通过 AJAX 请 求 发 送 给 服务 器 端 ; 当 书 籍 添加 成 功 后 ,为 了 更 新 客户 端的 书 
EE 示 标 签 会 将 服务 器 端 返回 的 数据 压 和 人 books 属性 ,这 样 属性 的 变更 会 导致 客户 端 


添加 


籍 列 
重新 
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第 1 行 定义 了 authors 属性 ,用 于 保存 作者 的 列表 ,该 属性 将 绑 定 到 作者 下 拉 列 表 框 。 
行 定 义 了 newBook 属性 ,该 属性 又 包含 5 个 数据 项 ,用 户 在 表单 中 输入 的 数据 将 被 绑 























各 个 数据 项 上 。 





在 该 段 代 码 中 还 定义 了 两 个 函数 , getAuthors 函数 用 于 获取 所 有 作者 的 列表 到 






































绑 定 , 从 而 刷新 页 面 显示 。 
其 次 在 Index. cshtml 中 构造 添加 书籍 的 标签 ,代码 如 下 : 








<divclass="col—- md- 4"> 
<div class= "panel panel- default"> 
<div class = "panel - heading"> <h2 class = "panel- title"> Add Book </h2 > </div> 
<div class= "panel - body"> 
< form class = "form - horizontal”data - bind= " submit: addBook"> 
<div class = "form- group"> 
<label for = "inputAuthor" class = "col - sm- 2 control- label"> Ruthor</label> 
<div class = "col 一 sm -10"> 
< select data - bind = "options:authors, optionsText: 'Name'v 
value: newBook. Ruthor"></select> 
</div> 
</div> 
<div class="form- group" data - bind= "with: newBook"> 
<label for = "inputTitle" class = "col- sm- 2 control - label"> Title </label > 
<div class = "col- sm- 10"> 
< input type = "text" class = "form - control” id = " inputTitle" 
data - bind = "value:Title" /> 
</div> 
<1label for = "inputYear" class= "col - sm— 2 control - label"> Year </label> 
<div class = "col 一 sm- 10"> 
< input type = "number" class = "form— control" id= "inputYear" 
data— bind = "value: Year" /> 
</div> 
<label for = "inputGenre" class = "col — sm— 2 control - label"> Genre </label > 
<div class = "col— sm- 10"> 
< input type= "text" class = "form— control" id = "inputGenre" 
data ~ bind= "value:Genre" /> 
</div> 
< label for = "inputPrice" class = "col — sm— 2 control ~ label"> Price </label > 
<div class = "col— sm- 10"> 
< input type= "number" step = "any" class= "form— control" id = "inputPrice' 
data— bind = "value:Price" /> 


</div> 
</div> 
<button type = "submit" class = "btn btn - default"> Submit </button > 
</form> 
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</div> 


</div> 
</div> 


注意 代码 中 的 加 粗 部 分 ,简单 说 明 如 下 : 


再 次 运行 该 项 目 , 完 整 的 界面 如 图 10-16 所 示 。 


sm Js ~ 和 


yi! 
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在 该 例 中 综合 使 用 了 实体 框架 、Web API、AJAX 等 技术 ,构建 了 一 个 完整 的 单 页 应 用 
程序 ,并 在 客户 端 开发 中 使 用 了 jQuery、BootStrap 和 Knockout 框架 ,大 幅度 提高 了 编码 效 
率 ,降低 了 开发 难度 。 

前 面 提 到 的 几 项 技术 和 框架 都 在 相关 章节 中 做 过 介绍 。 关 于 Knockout 框架 的 使 


请 参阅 
例如 A 


“http://knockoutjs. com/”。 事 实 上 ,做 客户 端 编程 还 有 很 多 优秀 的 框架 可 以 选 


在 < form > 标签 上 使 用 了 data-bind 二 "submit: addBook" 的 绑 定 形式 将 表单 的 提交 
事件 绑 定 到 了 视图 模型 中 的 addBook 方法 上 。 

在 < select > 标签 绑 定 上 使 用 options:authors 将 各 个 选项 绑 定 到 作者 列表 ,使 用 
optionsText: ' Name' 将 列表 项 的 显示 文本 设置 为 作者 的 姓名 ,而 使 用 value: 
newBook. Author 将 列表 项 的 提交 值 设置 为 作者 的 ID。 

在 第 3 个 粗 体 代码 中 使 用 data-bind 二 "with: newBook" 指 定 要 对 newBook 对 象 的 
各 个 属性 进行 遍历 。 

在 第 4 个 粗 体 代 码 中 使 用 data-bind 二 "value: Title" 将 newBook 对 象 的 Title 属性 
绑 定 到 UI 控件 的 value 属性 上 。 
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图 10-16 完整 的 书籍 管理 应 用 界面 
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ngular 框架 (https://angularjs. org/) 等 ,请 大 家 自行 查阅 资料 深入 学 习 。 
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(10.4 习题 和 上 机 练习 
~ 


简 答 题 


(1) AJAX 应 用 和 传统 Web 应 用 相 比 主要 有 哪些 不 同 ? 

(2) 在 AJAX 体系 结构 中 XMLHttpRequest 对 象 的 作用 是 什么 ? 在 IE 和 Firefox 中 
分 别 如 何 创 建 该 对 象 ? 

(3) 试 简要 介绍 XMLHttpRequest 对 象 的 常用 方法 和 属性 。 

(4) 试 总 结 AJAX 的 技术 体系 中 主要 包含 了 哪些 核心 技术 ? 














